fix input type color css

This commit is contained in:
cutls 2020-09-08 23:39:06 +09:00
parent 3f7aaa7e99
commit 8118806f4e
2 changed files with 26 additions and 14 deletions

View File

@ -340,6 +340,18 @@ blockquote:before,
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
} }
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
#menu { #menu {
position: fixed; position: fixed;
z-index: 999; z-index: 999;

View File

@ -146,7 +146,7 @@
<input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled /> <input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled />
<span>@@use@@</span> <span>@@use@@</span>
</label><br /> </label><br />
<input type="color" class="btn waves-effect" id="color-picker0_value"> <input type="color" id="color-picker0_value">
</div> </div>
<div> <div>
<h5>Text</h5>@@text@@<br /> <h5>Text</h5>@@text@@<br />
@ -154,7 +154,7 @@
<input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled /> <input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled />
<span>@@use@@</span> <span>@@use@@</span>
</label><br /> </label><br />
<input type="color" class="btn waves-effect" id="color-picker1_value"> <input type="color" id="color-picker1_value">
</div> </div>
<div> <div>
<h5>Subcolor</h5>@@subcolor@@<br /> <h5>Subcolor</h5>@@subcolor@@<br />
@ -162,7 +162,7 @@
<input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled /> <input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled />
<span>@@use@@</span> <span>@@use@@</span>
</label><br /> </label><br />
<input type="color" class="btn waves-effect" id="color-picker2_value"> <input type="color" id="color-picker2_value">
</div> </div>
<div> <div>
<h5>Accent</h5>@@accent@@<br /> <h5>Accent</h5>@@accent@@<br />
@ -170,7 +170,7 @@
<input type="checkbox" class="filled-in" id="use-color_3" value="1" checked disabled /> <input type="checkbox" class="filled-in" id="use-color_3" value="1" checked disabled />
<span>@@use@@</span> <span>@@use@@</span>
</label><br /> </label><br />
<input type="color" class="btn waves-effect" id="color-picker3_value"> <input type="color" id="color-picker3_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
@ -182,7 +182,7 @@
@@copyFrom@@: @@copyFrom@@:
<a class="pointer" onclick="copyColor('background','modal')">Background</a> <a class="pointer" onclick="copyColor('background','modal')">Background</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker4_value"> <input type="color" id="color-picker4_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>Modal Footer</h5>@@modalFooter@@<br /> <h5>Modal Footer</h5>@@modalFooter@@<br />
@ -194,7 +194,7 @@
<a class="pointer" onclick="copyColor('background','modalFooter')">Background</a>/ <a class="pointer" onclick="copyColor('background','modalFooter')">Background</a>/
<a class="pointer" onclick="copyColor('modal','modalFooter')">Modal</a> <a class="pointer" onclick="copyColor('modal','modalFooter')">Modal</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker5_value"> <input type="color" id="color-picker5_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>3rd Color</h5>@@thirdColor@@<br /> <h5>3rd Color</h5>@@thirdColor@@<br />
@ -205,7 +205,7 @@
@@copyFrom@@: @@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','third')">Subcolor</a> <a class="pointer" onclick="copyColor('subcolor','third')">Subcolor</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker6_value"> <input type="color" id="color-picker6_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>4th Color</h5>@@forthColor@@<br /> <h5>4th Color</h5>@@forthColor@@<br />
@ -217,7 +217,7 @@
<a class="pointer" onclick="copyColor('subcolor','forth')">Subcolor</a>/ <a class="pointer" onclick="copyColor('subcolor','forth')">Subcolor</a>/
<a class="pointer" onclick="copyColor('third','forth')">3rd Color</a> <a class="pointer" onclick="copyColor('third','forth')">3rd Color</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker7_value"> <input type="color" id="color-picker7_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>Bottom</h5>@@bottom@@<br /> <h5>Bottom</h5>@@bottom@@<br />
@ -228,7 +228,7 @@
@@copyFrom@@: @@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','bottom')">Subcolor</a> <a class="pointer" onclick="copyColor('subcolor','bottom')">Subcolor</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker8_value"> <input type="color" id="color-picker8_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>2nd Accent</h5>@@emphasized@@<br /> <h5>2nd Accent</h5>@@emphasized@@<br />
@ -239,7 +239,7 @@
@@copyFrom@@: @@copyFrom@@:
<a class="pointer" onclick="copyColor('accent','emphasized')">Accent</a> <a class="pointer" onclick="copyColor('accent','emphasized')">Accent</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker9_value"> <input type="color" id="color-picker9_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>Postbox</h5>@@postbox@@<br /> <h5>Postbox</h5>@@postbox@@<br />
@ -250,7 +250,7 @@
@@copyFrom@@: @@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','postbox')">Subcolor</a> <a class="pointer" onclick="copyColor('subcolor','postbox')">Subcolor</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker10_value"> <input type="color" id="color-picker10_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>Active</h5>@@active@@<br /> <h5>Active</h5>@@active@@<br />
@ -261,7 +261,7 @@
@@copyFrom@@: @@copyFrom@@:
<a class="pointer" onclick="copyColor('accent','active')">Accent</a> <a class="pointer" onclick="copyColor('accent','active')">Accent</a>
<br /> <br />
<input type="color" class="btn waves-effect" id="color-picker11_value"> <input type="color" id="color-picker11_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>Selected</h5>@@selected@@<br /> <h5>Selected</h5>@@selected@@<br />
@ -269,7 +269,7 @@
<input type="checkbox" class="filled-in" id="use-color_12" value="1" /> <input type="checkbox" class="filled-in" id="use-color_12" value="1" />
<span>@@use@@</span> <span>@@use@@</span>
</label><br /> </label><br />
<input type="color" class="btn waves-effect" id="color-picker12_value"> <input type="color" id="color-picker12_value">
</div> </div>
<div class="advanced hide"> <div class="advanced hide">
<h5>Selected with shared</h5>@@selectedWithShare@@<br /> <h5>Selected with shared</h5>@@selectedWithShare@@<br />
@ -277,7 +277,7 @@
<input type="checkbox" class="filled-in" id="use-color_13" value="1" /> <input type="checkbox" class="filled-in" id="use-color_13" value="1" />
<span>@@use@@</span> <span>@@use@@</span>
</label><br /> </label><br />
<input type="color" class="btn waves-effect" id="color-picker13_value"> <input type="color" id="color-picker13_value">
</div> </div>
</div><br /><br /> </div><br /><br />
<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button <button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button