爲什麼顯示此CSS輸入邊框？

Question

我有兩種不同的輸入框樣式，一個是黑色的，另一個是白色的。

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

如果檢查的元素，這表明它使用border-style: inset;爲input盒是由用戶代理樣式表設置的默認值。

所以，爲了解決這個問題，我們需要重寫border-style屬性input。因此，我們將其設置爲solid或者您可以將其設置爲border: 1px solid red;，用您的任何所需顏色替換red。

同時確保，如果你想要的目標input這是type=text，然後用選擇像

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>