14

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

我有这个 CSS 代码 -

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

我附上了chrome的截图。Firefox 显示相同的内容。谷歌浏览器屏幕截图

4

5 回答 5

33

尝试

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

通过将其设置border:none为文本字段的默认 css 将消失，您可以为自己设置样式。

演示

于 2013-09-27T11:35:47.283 回答
3 
#add {
    width: 60%;
    height: 25px;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 10px;
}

Border Auto 正在为您做到这一点。所以有你自己定义的边框样式。

于 2013-09-27T11:35:38.890 回答
1

我在 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;
}
于 2018-07-21T04:29:56.727 回答
0

通过设置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
于 2019-10-08T19:51:05.360 回答
-3

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

于 2021-07-08T04:11:01.987 回答