html - 入力タイプテキストのボーダー半径の問題

Question

<input type="text">入力ボックスの上部と左側に余分な境界線が表示されるという問題があります。

私はこのCSSコードを持っています -

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

クロムからのスクリーンショットを添付しています。Firefoxでも同じことが表示されます。

Answer 1

試す

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

テキスト フィールドのデフォルト css に設定するとborder:none、テキスト フィールドがなくなり、自分でスタイルを設定できるようになります。

デモ

Answer 2

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

Border auto がそれを行っています。したがって、独自の境界線スタイルを定義してください。