Question

我正在尝试将border-radius属性与输入文本标记一起使用以获得圆角。我能够在所有浏览器中实现圆角，即Firefox，IE和Chrome，但我发现Chrome中存在一个问题。在chrome中，我可以看到一个矩形框和圆角文本框。任何人都可以告诉我这是什么原因，我怎么能删除矩形框？我的Chrome版本是31.0.1650.63m

我用来测试的html代码如下 -

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    input
    {
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:200px;
    border-radius:25px;
   }
   </style>
   </head>
   <body>

   <input type="text"></input>

   </body>
   </html>

Firefox
chrome ie10

Answer 1

尝试使用appearance隐藏默认样式：

   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;

焦点状态也outline: none;隐藏蓝框。

Answer 2

尝试将outline: 0;添加到输入

请参阅此jsFiddle以获取示例

Answer 3

与其他用户一样，此处的问题与州:focus和outline属性相关。您可以删除将其设置为0的方块：

input:focus {
  outline:none;
}

但是为了保持为用户提供加号可访问性outline（使用 Tab ），您可能希望保留一些像box-shadow伪造的效果：

input:focus {
  box-shadow: 0px 0px 3px 1px green;
}

选中 Demo

border-radius属性，输入文本标记在Chrome浏览器中无法正常工作

3 个答案: