type = colorの内側の境界線を削除します

Jan 27 2021

type = colorを入力として使用すると、2つの境界線があります。border = noneを設定すると、外側の境界線のみが削除されます。ただし、中には小さなものが1つあります。他の多くのプロパティを試しましたが、それでも同じ結果になりました。これが私のコードです:

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
<input type="color" name="name1" id="name1" value="#ffffff">

これが私が意味することです: https://ibb.co/N3nVFqn 基本的にその境界線を削除したいと思います。

回答

2 Spectric Jan 27 2021 at 06:06

::-webkit-color-swatchセレクターを使用します。

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
::-webkit-color-swatch{
  border:none;
}
<input type="color" name="name1" id="name1" value="#ffffff">

Mozilla Firefoxの場合、以下を使用します::-moz-color-swatch

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
::-moz-color-swatch{
  border:none;
}
<input type="color" name="name1" id="name1" value="#ffffff">

1 DCR Jan 27 2021 at 06:27

2つの境界線をnoneに変更すると、両方を削除できます

input[type="color"] {
    appearance: none;
    border:solid 1px red;
    padding:0;
    height:50px;
    width:50px;
    background:white;
    box-sizing:unset;
}



input[type="color" i]::-webkit-color-swatch {
border:solid 1px blue;
}
<div>
<input type="color" name="name1" id="name1" value="#ffffff">
</div>

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved