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

Ani*_*mar 3 html css google-chrome

我正在尝试将 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>
Run Code Online (Sandbox Code Playgroud)

火狐浏览器
铬合金 即10

Mar*_*tin 5

尝试添加outline: 0;到输入

请参阅jsFiddle的示例