带输入类型文本的border-radius问题

Question

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

我有这个CSS代码 -

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

我正在附上chrome的截图.Firefox显示了同样的事情.

Answer 1

尝试

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

通过将其设置border:none为文本字段的默认css将会消失,您已准备好为自己设置样式.

演示