带输入类型文本的border-radius问题

Question

我在<input type="text">处遇到此问题，我在输入框的顶部和左侧看到了一些额外的边框。

我有这个CSS代码 -

#add{
      width: 60%;
      height: 25px;
      margin: 0 auto;
      border: auto;
      border-radius: 10px;
    }

我正在附加chrome的屏幕截图。 Firefox显示了同样的事情。

Answer 1

尝试

    #add{
      width: 60%;
      height: 25px;
      margin: 0 auto;
      border: none; /* <-- This thing here */
      border:solid 1px #ccc;
      border-radius: 10px;
    }

通过将其设置为border:none，文本字段的默认css将会消失，您已准备好为自己设置样式。

Demo

Answer 2

#add {
    width: 60%;
    height: 25px;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 10px;
}

Border auto正在为你做这件事。所以有你自己定义的边框样式。

Answer 3

我在Chrome中注意到导致这种外观的用户代理样式为border-style: inset;，您可以在下面的代码段中看到它。 Chrome可以方便地指示用户代理样式。我发现了两种解决此问题的方法。

1. 简单地设置border: 1px solid black;，您会发现边框将失去插入效果。
2. 如果要特别注意，可以设置border-style: none;，这将导致边框完全消失。然后，您可以根据需要设置边框。

我将在不同的浏览器中测试所有这些解决方案。

Chrome用户代理样式表：

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset; /* This rule adds the inset border */
    border-color: initial;
    border-image: initial;
}

Answer 4

通过设置border: none;将覆盖/无效文本字段的默认输入CSS，然后您可以添加自己的自定义CSS来美化输入文本元素，如下所示：

border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/

但是上述方法 不必要地繁琐 ，而您只需使用以下一行即可达到相同的结果：

border-radius: 10px !important; /*this simply does the trick!!!*/

**Note:** The !important property in CSS is used to provide more weight (importance) 
than normal property. It means that “this is important”, ignore all the subsequent 
rules

Answer 5

<input type="text" style="border-radius: 25px;" /> 100% 有效 试试这个