Webkit appearance none не работает

Стильные чекбоксы не для всех

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент , который создает поле для проставления галочки. Это поле имеет два состояния — отмечена галочка или нет — и во всех браузерах выглядит практически идентично, поскольку чекбоксы зависят от операционной системы. По этой причине стилизовать этот элемент довольно трудно, например, фоновый рисунок отображается только в браузерах IE и Opera. При этом результат выглядит настолько нелепо, что добавлять какие-либо стили отпадает всякое желание. Имитировать работу чекбокса можно конечно с помощью скриптов, используя стандартный элемент вроде , его как раз стилями легко превратить во что угодно. Однако не будем искать простых путей и сделаем все красиво через CSS 3, пусть это даже работает только в Safari и Chrome.

Для начала мне понадобится два рисунка чекбокса в разных состояниях. Для быстрой загрузки их желательно объединить в один, как показано на рис. 1.

Рис. 1. Вид будущего чекбокса

Верхнее изображение будет использоваться для флажков без галочки, а нижнее — с галочкой. Простое добавление фонового рисунка через свойство background , как отмечалось выше, ничего не даст. Необходимо отключить чекбокс, оставив при этом его функциональность. Это делается свойством CSS 3 appearance , которое, как вы уже догадались, не поддерживается пока ни одним браузером. Зато есть не входящие в спецификацию CSS -webkit-appearance и -moz-appearance , эти свойства, соответственно, работают в Safari (Chrome) и Firefox.

Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции. Если задать значение none , то чекбокс пропадет, но по нему, тем не менее, можно щелкать и состояние чекбокса будет меняться. Чтобы отследить это состояние я воспользуюсь псевдоклассом :checked . Изменив также курсор мыши при наведении на чекбокс, в итоге получил следующий код (пример 1).

Пример 1. Изменение вида чекбокса

HTML5 CSS 2.1 CSS3 IE Cr Op Sa Fx

Полюбоваться на результат можно на рис. 2.

Рис. 2. Вид чекбоксов в Safari

Firefox

Несмотря на схожую функциональность с -webkit-appearance , свойство -moz-appearance работает с ошибками и при значении none сохраняет вид чекбокса (рис. 3).

Рис. 3. Чекбоксы в браузере Firefox

Стиль в примере 1, хотя и работает только в Safari и Chrome, так или иначе, проявляется и в других браузерах. Поэтому желательно закрыть стиль от всех браузеров, кроме нужных. Для этого используется такой хак.

Окончательный код показан в примере 2. Браузеры Opera, IE, Firefox демонстрируют исходный вид чекбоксов, а Safari и Chrome с картинками.

Пример 2. Изменение вида чекбокса для Safari и Chrome

Источник

CSS и iOS Safari

Доброго времени суток, дорогие хабрахабровцы!

Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!

Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.

Свойства

1. -webkit-overflow-scrolling: touch

Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.

2. -webkit-text-size-adjust: none

Отключает масштабирование текста в горизонтальной ориентации.

3. -webkit-tap-highlight-color: #ccc

Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.

Пример такого выделения:

4. -webkit-appearance: none

Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.

Применяется не только в верстке для Safari.

Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.

Можно использовать не только в верстке для Safari.

Фиксы

1. background-attachment: fixed

Проблема: background-attachment: fixed не работает в iOS Safari.

Решение: Фиксировать не фон, а блок или псевдоэлемент.

2. Нежелательный скролл модального окна

Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.

Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.

3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.

Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.

Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js

К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.

4. Блок с position: fixed при скролле

Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.

Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:

Решение: Нужно сделать следующий «трюк», используя transform.

Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.

Выводы

А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!

Спасибо за внимание!

Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.

Источник

Что делать? Меняются стили кнопки на Safari IOS

Меняются стили input на Safari IOS. Прописал вендорные префиксы , не работает. 1 Кнопка на Chrome Android , а вторая на Safari IOS.

Что делать? Как решить данную проблему?

3 ответа 3

Добавь свойство -webkit-appearance: none; . Тоже помню как-то страдал.

Свойство appearance используется для отображения элемента с использованием платформенного стиля, основанного на теме операционной системы пользователя. И мы его убираем. Также убираем фокус, какой есть на safari и Google Chrome.

Ставьте к своим стилям этот reset.css и проблема отпадет. Сам пользовался normalize.css и была такая проблема. В этом reset прописано все, что надо.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка кроссбраузерность кроссплатформенность или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

-webkit-appearance: none; not working for button

Using contact forms 7 on my WordPress site development and I noticed the buttons were different for mobile devices, so after searching I found the solution of -webkit-appearance: none; which I applied to the element input.wpcf7-form-control.wpcf7-submit .

The style has been applied because it shows up when I inspect the element, but nothing has changed on mobile devices.

Should I have applied it to a different element?

2 Answers 2

You should try this code instead :

Consider adding !important if it still not working.

sorry for the super late answer. The class seems to be correct indeed. Temani’s answer is also a good suggestion for wider browser compatibility. However, sometimes, even being supported by browser like Safari, the use of the prefixed -webkit- has no effect. So, I’m going to give you two answers:

1. For the case of a submit input -your case-, you can simply give the background and border properties you want and that will overwrite the browsers default css properties. No need of the appearance property. But you will probably need to define each status of the button including :active and :hover
2. For Check boxes and radio buttons a workaround to the problem is hiding the input with visibility: hidden and using :before and/or :after to create an alternative check or radio which will also need a visibility: visible property. You can use the :checked:before selector to apply different appearances to each status

Note: remember :before and :after associated to an input will only work in Chrome and Safari and only together with the property appearance: none

Источник

outline:none; does NOT WORK — Only -webkit-appearance:none; is working — what is wrong here?

Edit: My concerns are for mobile websites.

Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone.

Everywhere I look, people say to use:

. and that this will remove the glow. well it doesn’t.

Another major problem is that there IS NO DEFAULT GLOW. I create a blank page with no styling and just a form input, view the page via IOS mobile, and there is no glow/outline on the input elements. it is just blank.

The only thing that works is using -webkit-appearance:none; — and that simply allows me to set a box-shadow on the input element. If I am not using the -webkit-appearance:none; — then the box shadow will not show properly.

When viewing this on a desktop browser however, the box shadows work fine even without webkit.

So my question is: why does outline:none; serve no purpose on input elements? I have seen some people say they only work on anchor tags, yet others say they work on input elements. Who is right here? Because so far, no matter what I do, outline:none; is worthless on input elements.

Here is a JSfiddle:

Viewing this page on iOS mobile, there is no «glow» or default styling to begin with. Where is everyone seeing the default glow behavior which requires outline:none; to work (which it doesn’t)? This is driving me mad!

Источник