入力タグに関するChromeディスプレイの問題

debugcn 投稿 Dev

すべて

私は次のコードを持っています：

.searchdiv {
  width: 140px;
  height: 35px;
  margin-left: 17px;
  margin-top: 12px;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-color: #707070;
}
.searchbox {
  padding: 3px;
  font-size: 16px;
  font-weight: bold;
  background-color: #121212;
  color: #6b6b6b;
  border-color: #121212;
  width: 100px;
  height: 25px;
}
.searchbox:focus {
  outline: none;
}
.maglass {
  position: fixed;
  top: 57px;
  left: 125px;
}
.maglass:focus {
  outline: none;
}

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
    </img>
  </form>
</div>

これを実行すると、次のように出力されます。

指定した色には黒枠が含まれていないので、黒枠の原因を知りたいのですが。

border-colorプロパティを削除しようとしましたが、境界線全体が灰色になります。

ハリー

Chromeに黒（っぽい）の境界線が表示されるのはなぜですか？

この問題は、ChromeのinputボックスのデフォルトのUA設定が原因です。値はデフォルトでinset（開発者コンソールから確認できます）に設定されており、これが要素に黒っぽい（黒ではなく、半透明の黒のように見える）はめ込み境界線を引き起こしているように見える値です。

境界線と背景色が変更されると、問題がより明確になります。以下のスニペットで、それを視覚化するためにいくつかの高コントラストの色を設定しました。

.searchdiv {
  width: 140px;
  height: 35px;
  margin-left: 17px;
  margin-top: 12px;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-color: #707070;
}
.searchbox {
  padding: 3px;
  font-size: 16px;
  font-weight: bold;
  background-color: #121212;
  color: #6b6b6b;
  border-color: #121212;
  width: 100px;
  height: 25px;
}
.searchbox:focus {
  outline: none;
}
.maglass {
  position: fixed;
  top: 57px;
  left: 125px;
}
.maglass:focus {
  outline: none;
}

/* Just for demo */

.searchbox.contrast {
  background-color: yellow;
  border-color: yellow;
}
.searchdiv {
  margin-top: 20px;
}

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox contrast" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>

解決策は何ですか？

これに対する解決策は非常に簡単です。デフォルトborder-styleを上書きsolidして、以下のスニペットのように設定するだけです。

.searchdiv {
  width: 140px;
  height: 35px;
  margin-left: 17px;
  margin-top: 12px;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-color: #707070;
}
.searchbox {
  padding: 3px;
  font-size: 16px;
  font-weight: bold;
  background-color: #121212;
  color: #6b6b6b;
  border-style: solid;
  border-color: #121212;
  width: 100px;
  height: 25px;
}
.searchbox:focus {
  outline: none;
}
.maglass {
  position: fixed;
  top: 57px;
  left: 125px;
}
.maglass:focus {
  outline: none;
}

/* Just for demo */

.searchbox.contrast {
  background-color: yellow;
  border-color: yellow;
}
.searchdiv {
  margin-top: 20px;
}

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox contrast" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>