it-swarm.com.ru

Удалить тень ввода iOS

На iOS (Safari 5) мне нужно следующее для элемента ввода (верхняя внутренняя тень):

example

Я хочу удалить верхнюю тень, ошибка -webkit-appearance не сохраняется.

Текущий стиль:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}
55
WHITECOLOR

Вам нужно будет использовать -webkit-appearance: none; для переопределения стилей по умолчанию IOS. Однако выбор только тега input в CSS не отменит стилей по умолчанию IOS, поскольку IOS добавляет его стили с помощью селектора атрибута input[type=text]. Поэтому вашему CSS нужно будет использовать селектор атрибута для переопределения стилей CSS по умолчанию IOS, которые были предварительно установлены.

Попробуй это: 

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Полезные ссылки:

Вы можете узнать больше о appearance здесь:

http://css-tricks.com/almanac/properties/a/appearance/

Если вы хотите узнать больше о селекторах атрибутов CSS, вы можете найти очень информативную статью здесь:

http://css-tricks.com/attribute-selectors/

136
Mastrianni
background-clip: padding-box;

Кажется, чтобы удалить тени, а также.

Как @davidpauljunior упомянутый; будьте осторожны при установке -webkit-appearance на общий селектор ввода.

23
jstnrs

webkit удалит все свойства 

-webkit-appearance: none;

Попробуйте использовать свойство box-shadow, чтобы удалить тень на элементе ввода

box-shadow: none !important;
5
ShinyJos

Я попытался найти решение, которое а.) Работает и б.) Я могу понять, почему оно работает

Я знаю, что тень для входных данных (и округленная граница для входных данных [type = "search"]) исходит от background-image. 

Очевидно, что установка background-image: none была моей первой попыткой, но это не похоже на работу.

Настройка background-image: url() работает, но я все еще обеспокоен наличием пустой url(). Хотя сейчас это просто плохое предчувствие.

background-clip: padding-box;, кажется, тоже справляется с этой задачей, но даже после прочтения документации "background-clip" я не понимаю, почему это полностью удаляет фон. 

Мое любимое решение:

background-image: linear-gradient(transparent, transparent);

Это действительно CSS, и я понимаю, как это работает.

1
Andreas Riedmüller