このCSS入力枠が表示されるのはなぜですか？

Question

入力ボックスには2つの異なるスタイルがあり、1つは暗く、もう1つは白です。暗い1オン

https://jsfiddle.net/ttwjLynh/

、そこにこの醜い白ボーダーのように見えるし、それがどこから来ている私は知りません。私はこのホワイトボーダーを取り除くことができますどのように

？白いバージョンには表示されず、背景色を追加するときにのみ表示される理由はわかりません。

（フィドルを確認してください）

.black{ 
    padding: 12px 20px; 
    margin : 0 auto; 
    box-sizing: border-box; 
    text-align: center; 
    display: inline-block; 
    background-color: black; 
    color: white; 
} 

.white{ 
    padding: 12px 20px; 
    margin : 0 auto; 
    box-sizing: border-box; 
    text-align: center; 
    display: inline-block; 
} 
<div id="bet-and-chance-input-boxes"> 
      <input class="black" value="text" autocomplete="off"> 
      <input readonly value="text" class="black" placeholder="" name="bet" autocomplete="off"> 
</div> 

<div id="bet-and-chance-input-boxes"> 
      <input class="white" id="userbet"value="text" autocomplete="off"> 
      <input readonly class="white" value="text" placeholder="" name="" autocomplete="off"> 
</div> 

Answer 1

あなたは要素を検査した場合、それはユーザーエージェントスタイルシートで設定されたデフォルト値であるinputボックスのborder-style: inset;を使用していることを示しています。

そうでオーダーそれを修正するために、我々はinputためborder-styleプロパティをオーバーライドする必要があります。したがって、solidに設定するか、またはborder: 1px solid red;と設定することができます。redは、お好みの色に置き換えてください。

はまた、あなたがtype=textであるinputをターゲットにしたい場合は、それが働いた

input[type=text] { 
    /* override the defaults here*/ 
} 

.black { 
 
    padding: 12px 20px; 
 
    margin: 0 auto; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: black; 
 
    color: white; 
 
    border-style: solid; 
 
} 
 

 
.white { 
 
    padding: 12px 20px; 
 
    margin: 0 auto; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<div id="bet-and-chance-input-boxes"> 
 
    <input class="black" value="text" autocomplete="off"> 
 
    <input readonly value="text" class="black" placeholder="" name="bet" autocomplete="off"> 
 
</div> 
 

 
<div id="bet-and-chance-input-boxes"> 
 
    <input class="white" id="userbet" value="text" autocomplete="off"> 
 
    <input readonly class="white" value="text" placeholder="" name="" autocomplete="off"> 
 
</div>