Html 输入类型文本的边界半径问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19049674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-radius issue with input type text
提问by Varun
I have this issue with <input type="text">where I see some extra border in top and left of the input box.
我<input type="text">在输入框的顶部和左侧看到一些额外的边框时遇到了这个问题。
I have this CSS code -
我有这个 CSS 代码 -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
我附上了 chrome 的屏幕截图。Firefox 显示了相同的内容。
回答by Jo E.
Try
尝试
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:nonethe default css of the text field will be gone and your ready to style it for yourself.
通过将其设置border:none为文本字段的默认 css 将消失，您可以为自己设置样式。
回答by Amit
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
Border auto 正在为您做这件事。所以有你自己定义的边框样式。
回答by King Holly
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset;You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
我在 Chrome 中注意到导致这种特定外观的用户代理样式是border-style: inset;您可以在下面的代码段中看到它。Chrome 可以方便地指示用户代理样式。我找到了两种方法来修复这种外观。
- Simply set
border: 1px solid black;and you notice that the border will lose that inset look. - If you want extra caution, you can set
border-style: none;This will cause the border to disappear altogether. You can then set the border as you wish.
- 只需设置
border: 1px solid black;，您就会注意到边框将失去插入外观。 - 如果你想要额外的小心，你可以设置
border-style: none;这将导致边框完全消失。然后，您可以根据需要设置边框。
I would test any of these solutions across different browsers.
我会在不同的浏览器上测试这些解决方案中的任何一个。
Chrome User Agent Stylesheet:
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;
}
回答by Tahir77667
By setting the border: none;will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
通过设置border: none;will 覆盖/取消文本字段的默认输入 css，然后您可以添加自己的自定义 css 来美化输入文本元素，如下所示：
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tediouswhereas you could achieve the same result in just a single line with:
然而，上述方法是不必要的乏味，而您可以在一行中获得相同的结果：
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
