为什么这个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的{​​{1}}属性。因此，我们将其设置为input，或者您可以将其设置为solid，将border: 1px solid red;替换为您所需的任何颜色。

另外请确保，如果您要定位red的{​​{1}}，请使用

之类的选择器

input

type=text

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