видалити внутрішню тінь введення тексту

80

Отже, у мене є введення тексту, використовуючи html5, на chrome, і я хочу змінити вигляд введення тексту, я видалив контур фокусу (оранжевий на chrome), я встановив фон на світлий колір, #f1f1f1але зараз є як би товстіша межа з верхньої та лівої сторін, ніби це призначено виглядати всунутим, коли в кольорі тла не змінюється, цього не відбувається. Як його видалити? На жаль, я не можу надати зображення на мобільному пристрої.

Це трапляється на chrome, тобто Firefox не може перевірити жоден інший.

html css input

— FabianCook
джерело

138

border-style:solid;замінить insetстиль. Що саме ви запитали.

border:none зніме межу всі разом.

border-width:1px встановить його таким, як перед зміною фону.

border:1px solid #cccccc є більш конкретним і застосовує всі три, ширину, стиль та колір.

Приклад: https://jsbin.com/quleh/2/edit?html,output

— Ентоні Хацопулос
джерело

7

Перший рядок, border-style: solid- найкраща відповідь на це питання.

— charleslparker

border-style: жодної відповіді не шукали

— Сатбір Кіра

47

Це рішення для мобільного сафарі:

-webkit-вигляд: немає;

як пропонується тут: Видаліть внутрішню тінь текстового поля на Mobile Safari (iPhone)

— Оуен
джерело

Працює як оберег

— Шалін Ніпуна

27

Наразі жодне з рішень не працює. Ось моє рішення. Можна додати префікси.

box-shadow: inset 0px 0px 0px 0px red;

— атілкан
джерело

18

Додайте border: noneабо border: 0взагалі видалити межу, або border: 1px solid #cccзробіть кордон тонким і плоским.

Щоб видалити примарне заповнення у Firefox, ви можете використовувати ::-moz-focus-inner:

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Дивіться демо в реальному часі .

— Марат Таналін
джерело

Коли я роблю це, у нього немає межі, так, але коли я встановлюю межу в 1 піксель і встановлюю колір у чорний, встановлюються лише дві сторони. Інший - білий.

— FabianCook

11

Встановіть, border: 1px solid blackщоб усі сторони дорівнювали та видаляли будь-які спеціальні межі (крім суцільних). Крім того, встановіть box-shadow: noneдля видалення будь-яку вбудовану тінь, застосовану до нього.

— Ерік Петручеллі
джерело

Якщо я встановив межу для будь-якого іншого кольору, скажімо #eee, все ще встановлюються лише дві сторони

— FabianCook

Подивіться моє оновлення. Можливо, вам доведеться змінити стиль і розмір меж, на solidта 1px.

— Ерік Петручеллі,

Дякую. Я заснував свій, так що так.

— FabianCook

1

box-shadow - це те, що змусило рішення працювати для мене, жодне інше рішення не мало цього.

— Nate M.

5

Спробуйте це
outline: none;

демо-версія https://codepen.io/wenpingguo/pen/KQgbXq

— користувач1506075
джерело

0

Я працюю над firefox. і у мене була та ж проблема, текст типу введення визначається автоматично, щось виглядає як вставка тіні, але це не так. що ви хочете змінити - це межа ... просто встановіть, border:0;і все готово.

— Вінсент Торп
джерело

0

ось невеликий фрагмент, який може бути здорово спробувати:

input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}

зверніть увагу, що: border-styleприбирає внутрішню тінь.

input {
    border-radius: 10px;
    border-color: violet;
    border-style: solid;
  }

<input type="text"/>

Розгорніть фрагмент

— bessa3301
джерело