border-radius给出奇怪的轮廓

Question

我在我的项目中试过这个，在jsfiddle等。

为什么我在这里得到一个奇怪的灰色轮廓：count

我申请的全部是：

    .myInput{
      font-size: 15px;
      text-align: center;
      border-radius: 20px;
    
    }

<input class="myInput" />

我显然只是希望它没有灰色的轮廓......

Answer 1

您可以使用“border：none”或类似内容修复它。有关详细信息，请查看border property。

我在下面的示例中使用了“1px solid black”。

.myInput{
  font-size: 15px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid black;
}

<input class="myInput" />

额外备注

您看到此行为的原因是浏览器会将默认样式应用于您的元素。通过不用CSS覆盖它们，您的元素将遵循所述样式。当你没有添加border-radius时你并没有真正注意到这一点，因为Chrome（我在Chrome上测试过）会勾勒出带有小灰色边框的输入字段。一旦你添加了border-radius，事情会变得更加明显。

因此，答案是看一下可用的边框属性来设置输入的样式，而不是依赖于浏览器的默认样式。