输入文字的边界半径问题 [英] border-radius issue with input type text

问题描述

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

I have this issue with <input type="text">where I see some extra border in top and left of the input box.

我有此CSS代码-

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

我正在附上chrome的屏幕截图. Firefox显示相同的内容.

I am attaching the screenshot from chrome. Firefox shows the same thing.

推荐答案

尝试

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

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

By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.

演示

这篇关于输入文字的边界半径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！