Проблема пограничного радиуса с текстом типа ввода

У меня есть эта проблема с <input type="text">, где я вижу дополнительную границу в верхней и левой части окна ввода.

У меня есть этот код CSS -

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

Я прилагаю скриншот от хром. Firefox показывает то же самое.

Ответ 1

Try

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

Установив его на border:none, по умолчанию css текстового поля исчезнет, и вы готовы его стиль для себя.

Демо

Ответ 2

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

Border auto делает это для вас. Так что имейте свой собственный определенный стиль границы.

Ответ 3

В Chrome я заметил, что стиль пользовательского агента, который вызывает этот особый вид, - border-style: inset;. Вы можете увидеть его во фрагменте ниже. Chrome удобен для указания стилей пользовательского агента. Я нашел два способа исправить это появление.

Просто установите border: 1px solid black;, и вы заметите, что граница потеряет этот внешний вид.
Если вам нужна дополнительная осторожность, вы можете установить border-style: none;. Это приведет к тому, что граница полностью исчезнет. Затем вы можете установить границу по своему усмотрению.

Я бы протестировал любое из этих решений в разных браузерах.

Таблица стилей агента пользователя Chrome:

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset; /* This rule adds the inset border */
    border-color: initial;
    border-image: initial;
}

Ответ 4

Установив border: none;, вы переопределите/аннулируете входной css по умолчанию для текстового поля, а затем вы можете добавить свой собственный css для украшения элемента входного текста, например, так:

border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/

Однако приведенный выше метод является излишне утомительным, тогда как вы можете достичь того же результата всего в одной строке с помощью:

border-radius: 10px !important; /*this simply does the trick!!!*/

**Note:** The !important property in CSS is used to provide more weight (importance) 
than normal property. It means that 'this is important', ignore all the subsequent 
rules