Товаров: 0 (0р.)

Webkit appearance button: appearance (-moz-appearance, -webkit-appearance) — Веб-технологии для разработчиков

appearance (-moz-appearance, -webkit-appearance) — Веб-технологии для разработчиков

ValueDemoBrowserDescription
none
div{ color: black;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none; }
<div>Lorem</div>
Firefox Chrome Safari EdgeNo special styling is applied. This is the default.
auto  
div{ color: black;
-moz-appearance: auto;
-webkit-appearance: auto;
appearance:auto; }
<div>Lorem</div>
NoneThe user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
attachment  
div{ color: black;
-moz-appearance: attachment;
-webkit-appearance: attachment; }
<div>Lorem</div>
Safari 
borderless-attachment  
div{ color: black;
-moz-appearance: borderless-attachment;
-webkit-appearance: borderless-attachment; }
<div>Lorem</div>
Safari 
button  
div { color: black;
-moz-appearance: button;
-webkit-appearance: button; }
<div>Lorem</div>
Firefox Chrome Safari EdgeThe element is drawn like a button.
button-arrow-down  
div { color: black;
-moz-appearance: button-arrow-down;
-webkit-appearance: button-arrow-down; }
<div>Lorem</div>
FirefoxRemoved in FF 64
button-arrow-next  
div { color: black;
-moz-appearance: button-arrow-next;
-webkit-appearance: button-arrow-next; }
<div>Lorem</div>
FirefoxRemoved in FF 64
button-arrow-previous  
div { color: black;
-moz-appearance: button-arrow-previous;
-webkit-appearance: button-arrow-previous; }
<div>Lorem</div>
FirefoxRemoved in FF 64
button-arrow-up  
div { color: black;
-moz-appearance: button-arrow-up;
-webkit-appearance: button-arrow-up; }
<div>Lorem</div>
FirefoxRemoved in FF 64
button-bevel  
div { color: black;
-moz-appearance: button-bevel;
-webkit-appearance: button-bevel; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
button-focus  
div { color: black;
-moz-appearance: button-focus;
-webkit-appearance: button-focus; }
<div>Lorem</div>
FirefoxRemoved in FF 64
caps-lock-indicator  
div{ color: black;
-moz-appearance: caps-lock-indicator;
-webkit-appearance: caps-lock-indicator; }
<div>Lorem</div>
Safari Edge 
caret  
 

div { color: black;
-moz-appearance: caret;
-webkit-appearance: caret; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
checkbox  
div { color: black;
-moz-appearance: checkbox;
-webkit-appearance: checkbox; }
<div>Lorem</div>
Firefox Chrome Safari EdgeThe element is drawn like a checkbox, including only the actual «checkbox» portion.
checkbox-container
  
div { color: black;
-moz-appearance: checkbox-container;
-webkit-appearance: checkbox-container; }
<div>Lorem</div>
FirefoxThe element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
checkbox-label  
div { color: black;
-moz-appearance: checkbox-label;
-webkit-appearance: checkbox-label; }
<div>Lorem</div>
Firefox 
checkmenuitem  Firefox 
color-well  
div{ color: black;
-moz-appearance: color-well;
-webkit-appearance: color-well; }
<div>Lorem</div>
Safariinput type=color
continuous-capacity-level-indicator  
div{ color: black;
-moz-appearance: continuous-capacity-level-indicator;
-webkit-appearance: continuous-capacity-level-indicator; }
<div>Lorem</div>
Safari 
default-button
  
div{ color: black;
-moz-appearance: default-button;
-webkit-appearance: default-button; }
<div>Lorem</div>
Safari Edge 
discrete-capacity-level-indicator  
div{ color: black;
-moz-appearance: discrete-capacity-level-indicator;
-webkit-appearance: discrete-capacity-level-indicator; }
<div>Lorem</div>
Safari 
dualbutton  
div { color: black;
-moz-appearance: dualbutton;
-webkit-appearance: dualbutton; }
<div>Lorem</div>
FirefoxRemoved in FF 64
groupbox  
div { color: black;
-moz-appearance: groupbox;
-webkit-appearance: groupbox; }
<div>Lorem</div>
FirefoxRemoved in FF 64
inner-spin-button  
div{ color: black;
-webkit-appearance: inner-spin-button; }
<div>Lorem</div>
Firefox Chrome Safari 
image-controls-button
  
div{ color: black;
-moz-appearance: image-controls-button;
-webkit-appearance: image-controls-button; }
<div>Lorem</div>
Safari 
list-button  
div{ color: black;
-moz-appearance: list-button;
-webkit-appearance: list-button; }
<div>Lorem</div>
Safaridatalist
listbox  
div { color: black; height:20px;
-moz-appearance: listbox;
-webkit-appearance: listbox; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
listitem  
div { color: black;
-moz-appearance: listitem;
-webkit-appearance: listitem; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
media-enter-fullscreen-button  Chrome Safari 
media-exit-fullscreen-button  Chrome Safari 
media-fullscreen-volume-slider  Safari 
media-fullscreen-volume-slider-thumb  Safari 
media-mute-button  Chrome Safari Edge 
media-play-button  Chrome Safari Edge 
media-overlay-play-button  Chrome Safari 
media-return-to-realtime-button  Safari 
media-rewind-button 
Safari 
media-seek-back-button  Safari Edge 
media-seek-forward-button  Safari Edge 
media-toggle-closed-captions-button  Chrome Safari 
media-slider  Chrome Safari Edge 
media-sliderthumb  Chrome Safari Edge 
media-volume-slider-container  Chrome Safari 
media-volume-slider-mute-button  Safari 
media-volume-slider  Chrome Safari 
media-volume-sliderthumb  Chrome Safari 
media-controls-background  Chrome Safari 
media-controls-dark-bar-background  Safari 
media-controls-fullscreen-background  Chrome Safari 
media-controls-light-bar-background  Safari 
media-current-time-display  Chrome Safari 
media-time-remaining-display  
div{ color: black;
-webkit-appearance: media-time-remaining-display; }
<div>Lorem</div>
Chrome Safari 
menuarrow  FirefoxRemoved in Firefox 64
menubar  FirefoxRemoved in Firefox 64
menucheckbox  FirefoxRemoved in Firefox 64
menuimage  FirefoxRemoved in Firefox 64
menuitem  FirefoxRemoved in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
menuitemtext  FirefoxRemoved in FF 64
menulist  Firefox Chrome Safari Edge 
menulist-button  Firefox Chrome Safari EdgeThe element is styled as a button that would indicate a menulist can be opened.
menulist-text  Firefox Chrome Safari Edge 
menulist-textfield  Firefox Chrome Safari EdgeThe element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup  FirefoxRemoved in Firefox 64
menuradio  FirefoxRemoved in Firefox 64
menuseparator  FirefoxRemoved in Firefox 64
meter
div{ color: black;
-webkit-appearance: meter; }
<div>Lorem</div>
Chrome Safari FirefoxNew in Fx 64
meterbar  
div { color: black;
-moz-appearance: meterbar;
-webkit-appearance: meterbar; }
<div>Lorem</div>
FirefoxNew in Fx 16. Use meter instead
meterchunk  
div { color: black;
-moz-appearance: meterchunk;
-webkit-appearance: meterchunk; }
<div>Lorem</div>
FirefoxNew in Fx 16. Removed in Firefox 64.
number-input  
div { color: black;
-moz-appearance: number-input;
-webkit-appearance: number-input; }
<div>Lorem</div>
Firefox 
progress-bar
div{ color: black;
-webkit-appearance: progress-bar; }
<div>Lorem</div>
Chrome Safari FirefoxNew in Fx 64
progress-bar-value  
div{ color: black;
-webkit-appearance: progress-bar-value; }
<div>Lorem</div>
Chrome Safari 
progressbar  
div { color: black;
-moz-appearance: progressbar;
-webkit-appearance: progressbar; }
<div>Lorem</div>
FirefoxThe element is styled like a progress bar. Use progress-bar instead
progressbar-vertical  
div { color: transparent;
-moz-appearance: progressbar-vertical;
-webkit-appearance: preogressbar-vertical; }
<div>Lorem</div>
Firefox 
progresschunk  
div { color: black;
-moz-appearance: progresschunk;
-webkit-appearance: progresschunk; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
progresschunk-vertical  
div { color: black;
-moz-appearance: progresschunk-vertical;
-webkit-appearance: progresschunk-vertical; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
push-button  
div{ color: black; -webkit-appearance: push-button; }
<div>Lorem</div>
Chrome Safari Edge 
radio  
div { color: black;
-moz-appearance: radio;
-webkit-appearance: radio; }
<div>Lorem</div>
Firefox Chrome Safari EdgeThe element is drawn like a radio button, including only the actual «radio button» portion.
radio-container  
div { color: black;
-moz-appearance: radio-container;
-webkit-appearance: radio-container; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
radio-label  
div { color: black;
-moz-appearance: radio-label;
-webkit-appearance: radio-label; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
radiomenuitem  FirefoxRemoved in Firefox 64.
range  
div { color: black;
-moz-appearance: range;
-webkit-appearance: range; }
range
<div>Lorem</div>
Firefox 
range-thumb  
div { color: black;
-moz-appearance: range-thumb;
-webkit-appearance: range-thumb; }
<div>Lorem</div>
Firefox 
rating-level-indicator  
div{ color: black;
-moz-appearance: rating-level-indicator;
-webkit-appearance: rating-level-indicator; }
<div>Lorem</div>
Safari 
resizer  
div { color: transparent;
-moz-appearance: resizer;
-webkit-appearance: resizer; }
<div>Lorem</div>
FirefoxRemoved in Firefox 63
resizerpanel  
div { color: black;
-moz-appearance: resizerpanel;
-webkit-appearance: resizerpanel; }
<div>Lorem</div>
FirefoxRemoved in Firefox 63.
scale-horizontal  
div { color: transparent;
-moz-appearance: scale-horizontal;
-webkit-appearance: scale-horizontal; }
<div>Lorem</div>
Firefox 
scalethumbend  
div { color: black;
-moz-appearance: scalethumbend;
-webkit-appearance: scalethumbend; }
<div>Lorem</div>
Firefox 
scalethumb-horizontal  
div { color: transparent;
-moz-appearance: scalethumb-horizontal;
-webkit-appearance: scalethumb-horizontal; }
<div>Lorem</div>
Firefox 
scalethumbstart  
div { color: black;
-moz-appearance: scalethumbstart;
-webkit-appearance: scalethumbstart; }
<div>Lorem</div>
Firefox 
scalethumbtick  
div { color: black;
-moz-appearance: scalethumbtick;
-webkit-appearance: scalethumbtick; }
<div>Lorem</div>
Firefox 
scalethumb-vertical  
div { color: black;
-moz-appearance: scalethumb-vertical;
-webkit-appearance: scalethumb-vertical; }
<div>Lorem</div>
Firefox 
scale-vertical  
div { color: transparent;
-moz-appearance: scale-vertical;
-webkit-appearance: scale-vertical; }
<div>Lorem</div>
Firefox 
scrollbarbutton-down  FirefoxRemoved in Firefox 63.
scrollbarbutton-left  FirefoxRemoved in Firefox 63.
scrollbarbutton-right  FirefoxRemoved in Firefox 63.
scrollbarbutton-up  FirefoxRemoved in Firefox 63.
scrollbarthumb-horizontal  Firefox 
scrollbarthumb-vertical  Firefox 
scrollbartrack-horizontal  Firefox 
scrollbartrack-vertical  Firefox 
searchfield  
div { color: black;
-moz-appearance: searchfield;
-webkit-appearance: searchfield; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
searchfield-decoration  
div{ color: black;
-moz-appearance: searchfield-decoration;
-webkit-appearance: searchfield-decoration; }
<div>Lorem</div>
Safari Edge 
searchfield-results-decoration  
div{ color: black;
-moz-appearance: searchfield-results-decoration;
-webkit-appearance: searchfield-results-decoration; }
<div>Lorem</div>
Safari Edge 
searchfield-results-button  
div{ color: black;
-moz-appearance: searchfield-results-button;
-webkit-appearance: searchfield-results-button; }
<div>Lorem</div>
Safari Edge 
searchfield-cancel-button  
div{ color: black;
-webkit-appearance: searchfield-cancel-button; }
<div>Lorem</div>
Chrome Safari Edge 
snapshotted-plugin-overlay  
div{ color: black;
-moz-appearance: snapshotted-plugin-overlay;
-webkit-appearance: snapshotted-plugin-overlay; }
<div>Lorem</div>
Safari 
separator  
div { color: transparent;
-moz-appearance: separator;
-webkit-appearance: separator; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
sheet  
div { color: black;
-moz-appearance: sheet;
-webkit-appearance: sheet; }
<div>Lorem</div>
None 
slider-horizontal  
div{ color: black;
-webkit-appearance: slider-horizontal; }
<div>Lorem</div>
Chrome Safari Edge 
slider-vertical  
div{ color: black;
-webkit-appearance: slider-vertical; }
<div>Lorem</div>
Chrome Safari Edge 
sliderthumb-horizontal  
div{ color: black;
-webkit-appearance: slider-thumb-horizontal; }
<div>Lorem</div>
Chrome Safari Edge 
sliderthumb-vertical  
div{ color: black;
-webkit-appearance: slider-thumb-vertical; }
<div>Lorem</div>
Chrome Safari Edge 
spinner  
div { color: transparent;
-moz-appearance: spinner;
-webkit-appearance: spinner; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
spinner-downbutton  
div { color: black;
-moz-appearance: spinner-downbutton;
-webkit-appearance: spinner-downbutton; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
spinner-textfield  
div { color: black;
-moz-appearance: spinner-textfield;
-webkit-appearance: spinner-textfield; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
spinner-upbutton  
div { color: black;
-moz-appearance: spinner-upbutton;
-webkit-appearance: spinner-upbutton; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
splitter  
div { color: transparent;
-moz-appearance: splitter;
-webkit-appearance: splitter; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
square-button  
div{ color: black;
-moz-appearance: square-button;
-webkit-appearance: square-button; }
<div>Lorem</div>
Chrome Safari Edge 
statusbar  
div { color: black;
-moz-appearance: statusbar;
-webkit-appearance: statusbar; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
statusbarpanel  
div { color: black;
-moz-appearance: statusbarpanel;
-webkit-appearance: statusbarpanel; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
tab  
div { color: black; height: 20px;
-moz-appearance: tab;
-webkit-appearance: tab; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64
tabpanel  
div { color: black;
-moz-appearance: tabpanel;
-webkit-appearance: tabpanel; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
tabpanels  
div { color: black;
-moz-appearance: tabpanels;
-webkit-appearance: tabpanels; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64
tab-scroll-arrow-back  FirefoxRemoved in Firefox 64.
tab-scroll-arrow-forward  FirefoxRemoved in Firefox 64.
textarea
div{ color: black;
-webkit-appearance: textarea; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
textfield  
div { color: black;
-moz-appearance: textfield;
-webkit-appearance: textfield; }
<div>Lorem</div>
Firefox Chrome Safari Edge 
textfield-multiline  
div { color: black;
-moz-appearance: textfield-multiline;
-webkit-appearance: textfield-multiline; }
<div>Lorem</div>
FirefoxUse textarea instead
toolbar  FirefoxRemoved in Firefox 64.
toolbarbutton  FirefoxRemoved in Firefox 64.
toolbarbutton-dropdown  FirefoxRemoved in Firefox 64.
toolbargripper  FirefoxRemoved in Firefox 64.
toolbox  FirefoxRemoved in Firefox 64.
tooltip  FirefoxRemoved in Firefox 64.
treeheader  FirefoxRemoved in Firefox 64.
treeheadercell  FirefoxRemoved in Firefox 64.
treeheadersortarrow  FirefoxRemoved in Firefox 64.
treeitem  
div { color: black;
-moz-appearance: treeitem;
-webkit-appearance: treeitem; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
treeline  
div { color: black;
-moz-appearance: treeline;
-webkit-appearance: treeline; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
treetwisty  
div { color: transparent;
-moz-appearance: treetwisty;
-webkit-appearance: treetwisty; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
treetwistyopen  
div { color: transparent;
-moz-appearance: treetwistyopen;
-webkit-appearance: treetwistyopen; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
treeview  
div { color: black;
-moz-appearance: treeview;
-webkit-appearance: treeview; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
relevancy-level-indicator  
div{ color: black;
-moz-appearance: relevancy-level-indicator;
-webkit-appearance: relevancy-level-indicator; }
<div>Lorem</div>
Safari 
-moz-win-borderless-glass  
div { color: black;
-moz-appearance: -moz-win-borderless-glass; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64. This style applies the Aero Glass effect — but without a border — to the element.
-moz-win-browsertabbar-toolbox  FirefoxRemoved in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext  
div { color: black;
-moz-appearance: -moz-win-communicationstext; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-win-communications-toolbox  FirefoxRemoved in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
-moz-win-exclude-glass  
div { color: black;
-moz-appearance: -moz-win-exclude-glass; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass  
div { color: black;
-moz-appearance: -moz-win-glass; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64. This style applies the Aero Glass effect to the element.
-moz-win-media-toolbox  FirefoxRemoved in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box  
div { color: black;
-moz-appearance: -moz-window-button-box; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-button-box-maximized  
div { color: black;
-moz-appearance: -moz-window-button-box-maximized; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-button-close  
div { color: black;
-moz-appearance: -moz-window-button-close; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-button-maximize  
div { color: black;
-moz-appearance: -moz-window-button-maximize; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-button-minimize  
div { color: black;
-moz-appearance: -moz-window-button-minimize; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-button-restore  
div { color: black;
-moz-appearance: -moz-window-button-restore; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-frame-bottom  
div { color: black;
-moz-appearance: -moz-window-frame-bottom; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-frame-left  
div { color: black;
-moz-appearance: -moz-window-frame-left; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-frame-right  
div { color: black;
-moz-appearance: -moz-window-frame-right; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-titlebar  
div { color: black;
-moz-appearance: -moz-window-titlebar; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-moz-window-titlebar-maximized  
div { color: black;
-moz-appearance: -moz-window-titlebar-maximized; }
<div>Lorem</div>
FirefoxRemoved in Firefox 64.
-apple-pay-button  
div{ color: black;
-webkit-appearance: -apple-pay-button; }
<div>Lorem</div>
SafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

Свойство -webkit-appearance | назначение, допустимые значения, примеры

Свойство -webkit-appearance — изменяет внешний вид кнопок и других элементов управления, чтобы походить на стандартные средства управления.

Допустимые значения

  • none — к элементу не применяется специальный стиль
  • caps-lock-indicator — индикатор, который появляется в поле пароля, когда Caps Lock включен (поддерживает Safari 4.0 и выше)
  • button — элемент выглядит как кнопка
  • button-bevel — элемент выглядит как косая кнопка
  • caret — элемент выглядит как знак вставки
  • checkbox — элемент выглядит как флаг без метки
  • default-button — элемент выглядит как кнопка оформленная по-умолчанию
  • listbox — элемент выглядит как список
  • listitem — элемент выглядит как элемент списка
  • media-fullscreen-button — элемент выглядит как кнопка для перехода в полноекранный режим
  • media-mute-button — элемент выглядит как кнопка отключения звука
  • media-play-button — элемент выглядит как кнопка play
  • media-seek-back-button — элемент выглядит как кнопка назад
  • media-seek-forward-button — элемент выглядит как кнопка вперед
  • media-slider — элемент выглядит как ползунок
  • media-sliderthumb — элемент выглядит как указатель полосы прокрутки
  • menulist — элемент выглядит как список меню
  • menulist-button — элемент выглядит как кнопка, дающая возможность открыть список меню
  • menulist-text — элемент выглядит как текст, дающая возможность открыть список меню
  • menulist-textfield — элемент выглядит как поле ввода для списка меню
  • push-button — элемент выглядит как нажатая кнопка
  • radio — элемент выглядит как переключатель
  • searchfield — элемент выглядит как поле поиска
  • searchfield-cancel-button — элемент выглядит как кнопка отмены поиска
  • searchfield-decoration — элемент выглядит как декорация поля поиска
  • searchfield-results-button — элемент выглядит как кнопка для поиска
  • searchfield-results-decoration — элемент выглядит как декорация кнопки для поиска
  • slider-horizontal — горизонтальная полоса прокрутки
  • slider-vertical — вертикальная полоса прокрутки
  • sliderthumb-horizontal — горизонтальный указатель полосы прокрутки
  • sliderthumb-vertical — вертикальный указатель полосы прокрутки
  • square-button — элемент выглядит как квадратная кнопка
  • textarea — элемент выглядит как textarea
  • textfield — элемент выглядит как текстовое поле
Значение по умолчаниюnone
Применимоко всем элементам
Наследованиенет
Поддерживается браузерами
  • Safari 3.0 и выше
  • Chrome 1.0 и выше

Пример

CSS

.block {
display:-webkit-box;
-webkit-appearance: default-button;
}

По теме

Интересные -webkit CSS свойства / Хабр

Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда.

И так, есть несколько очень интересных свойств, которые присущи движкам WebKit. Например, есть свойство

-webkit-touch-callout

Это свойство позволяет вам диктовать поведение браузера в момент тапа и удержания пальца на ссылке. По умолчанию в браузерах всплывает окно, содержащее информацию о ссылке. По умолчанию у этого свойства выставлено значение default, но установив значение none окошко с информацией всплывать не будет.
a.js-only {
  -webkit-touch-callout: none;
}

Это свойство полезно применять в тех случаях когда на ссылку повешен какой-либо JavaScript/AJAX.

-webkit-user-drag

Свойство указывает на то, что во время перетаскивания блока двигаться должен именно блок, а не содержимое внутри него.
/* ничего не перетаскивает */
.content p.noDrag {
  -webkit-user-drag: none;
}

/* перетаскивается весь элемент а не контент внутри */
.sidebar div.elDrag {
  -webkit-user-drag: element;
}
-webkit-appearance

Задавая это свойство элементу вы можете определять то, как будет выглядеть элемент SPAN. Например, как radio button:
span.lookLikeRadio {
  -webkit-appearance: radio;
}

Или как textarea:

span.lookLikeTextarea {
  -webkit-appearance: textarea;
}

Всего таких значений около 50. Весь список можно посмотреть тут.

-webkit-text-security

Оказывается, маску при вводе пароля можно изменять. Например, вместо кружков можно отображать квадраты.
input[type="password"] {
  -webkit-text-security: square;
}
-webkit-user-select

Определяет что пользователь может выбирать внутри элемента.
div {
  -webkit-user-select: none;
}

На этом все. Это был вольный перевод данной статьи.

UPD. Уточнение по свойству -webkit-touch-callout.

Модальные окна с размытым фоном на CSS3

Модальные окна являются неотъемлемой частью современного веб-дизайна, с помощью их, разработчик может прибегнуть к методу зацикливания на одной странице и не перебрасывания посетителя на вспомогательные страницы. В данном уроке мы рассмотрим как создать замечательные модальные окна с размытым фоном для сайта с использованием jQuery и CSS3. Благодаря данным правилам мы создадим размытый фон при появлении окна, что привяжет взор посетителя только к необходимой информации на сайте.

 

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

Анимация окна будет установлена таким спомобом, что при нажатии на кмопку появление, окно будет осуществлять анимацию сверху в низ, при этом автоматически усиливается размытость фона.

Шаг 1. HTML

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<div>

<article>

<h3>Заголовок</h3>

<p>Описание</p>

<div align=right><button>Открыть статью</button></div>

</article>

</div>

</div>

<div>

<div>

<div>

<h3>Заголовок для окна</h3>

</div>

</div>

<div>

<div>

<p>Вкладки весьма интересная и удобная штука при создании сайта, она позволяет правильно организовать информацию, при этом сэкономив немного места на сайте.

</p>

</div>

</div>

<div>

<div>

<button>Закрыть</button>

</div>

</div>

</div>

Затем нам необходимо добавить класс modal is-active, данный класс будет отвечать за вызов модального окна, modal__header отвечает за заголовок и его стилизацию окна.

Шаг 2. CSS

Тепреь перейдем к стилизации, первым шагом станет класс button, который будет отвечать, как вы уже догадались, за кнопки на сайте, мы устанавливаем для него правильные параметры отображения:

button {

background: none;

background-clip: padding-box;

display: inline-block;

border: 0;

user-select: none;

-webkit-touch-callout: none;

-webkit-appearance: button;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

.container {

position: relative;

margin:0 auto;

max-width: 960px;

box-sizing: border-box;

padding-top: 40px;

}</p>

article {

background: #fff;

padding: 20px;

margin-bottom: 40px;

border-radius: 5px;

}

.modal {

display: none;

position: fixed;

top: 50%;

width: 100%;

height: auto;

margin-top: -150px;

background-color: $color-white;

border-radius: 3px;

z-index: 999;

box-shadow: 0px 1px 3px 0px darken($color-bg, 10%);

 

@media #{$small} {

left: 50%;

margin-left: -260px;

max-width: 520px;

}

 

&.is-active {

display: block;

animation: 1s linear slide;

}

.inner {

position: relative;

padding: 20px;

}

}

.modal__header {

border-bottom: 1px solid darken($color-bg, 5%);

}

.modal__footer {

text-align: center;

 

button {

display: inline-block;

}

}

Стили достаточно просты, они храняться отдельным файлом и не должны вызвать сложности при их редактировании у разработчика который хоть раз сталкивался с CSS.

Шаг 3. JS

Последним нашом, но не менее важным, станет установка автоматического размытия фона при появлении меню, а также кликабельности ссылок, в этом нам помогут небольшие правила JS:

$(‘body’).addClass(‘is-blurred’);

 

$(‘.toggleModal’).on(‘click’, function (event) {

event.preventDefault();

 

$(‘.modal’).toggleClass(‘is-active’);

$(‘body’).toggleClass(‘is-blurred’);

});

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

Вот и все. Готово!

Читайте также:

CSS -webkit-appearance

Свойство CSS -webkit-appearance позволяет веб-авторам изменять внешний вид элементов HTML, чтобы они напоминали собственные элементы управления пользовательского интерфейса (UI).

Свойство CSS -webkit-appearance — это проприетарное расширение CSS, которое поддерживается механизмом браузера WebKit. Расширения WebKit содержат префикс -webkit- , который указывает на принадлежность к платформе с открытым исходным кодом WebKit.

Хотя свойство -webkit-appearance не является частью официальной спецификации CSS W3C, оно разработано для работы в браузерах, работающих на движке браузера WebKit, таких как Apple Safari и Google Chrome.

Вот …

Кнопка?

Синтаксис

Синтаксис свойства -webkit-appearance :

 -webkit-appearance:

Где <значение> представляет элемент управления пользовательского интерфейса, на который должен напоминать элемент.

Пример кода

Вот пример использования (обратите внимание, что этот пример также включает другие проприетарные расширения):

-webkit-appearance: button; / * WebKit * /
-moz-внешний вид: кнопка; / * Mozilla * /
-о-внешний вид: кнопка; / * Опера * /
-ms-appearance: button; / * Internet Explorer * /
внешний вид: кнопка; / * CSS3 * /

Принятые значения

Вот допустимые значения для свойства -webkit-appearance :

  • кнопка
  • пуговица с фаской
  • caps-lock-indicator (Индикатор, который появляется в поле пароля, когда Caps Lock активен.Доступно в Safari 4.0 и новее, iOS 2.0 и новее)
  • каретка
  • флажок
  • список
  • список
  • Менулист
  • кнопка-менюсписок
  • текст-менюлист
  • текстовое поле меню
  • нет
  • кнопочный
  • радио
  • кнопка полосы прокрутки вверх (не поддерживается в Safari 4.0)
  • полоса прокрутки вниз (не поддерживается в Safari 4.0)
  • полоса прокрутки - влево (не поддерживается в Safari 4.0)
  • полоса прокрутки - вправо (не поддерживается в Safari 4.0)
  • scrollbartrack-horizontal (не поддерживается в Safari 4.0)
  • scrollbartrack-vertical (не поддерживается в Safari 4.0)
  • scrollbarthumb-horizontal (не поддерживается в Safari 4.0)
  • scrollbarthumb-vertical (не поддерживается в Safari 4.0)
  • scrollbargripper-horizontal (не поддерживается в Safari 4.0)
  • scrollbargripper-vertical (не поддерживается в Safari 4.0)
  • поле поиска
  • отделка поля поиска
  • searchfield-results-украшение
  • поле поиска - кнопка результатов
  • кнопка отмены поля поиска
  • слайдер горизонтальный
  • слайдер вертикальный
  • ползунок большой палец горизонтальный
  • слайдер большой палец вертикальный
  • квадратная кнопка
  • текстовое поле
  • текстовое поле

Наличие

Свойство -webkit-appearance доступно в:

  • Safari 3.0 и выше
  • iOS 1.0 и выше

Эквивалент CSS3

CSS3, эквивалентный свойству -webkit-appearance , является свойством appearance .

Совместимость с браузером

Это свойство является проприетарным расширением, которое поддерживается только в браузерах Chrome и Safari. Для максимальной совместимости с браузером вы должны добавить в свой код эквивалент W3C CSS3. Обычно это делается путем удаления префикса -webkit- , однако вы всегда должны проверять правильный синтаксис перед реализацией кода (на момент написания CSS3 все еще находился в стадии разработки).

Также рассмотрите возможность добавления других проприетарных расширений, таких как -ms- для Internet Explorer, -moz- для Firefox, -o- для Opera и т. Д. Однако перед этим следует проверить наличие соответствующего расширения, так как не все браузеры имеют соответствующие расширения, и те, которые имеют, могут не обязательно принимать одни и те же параметры.

CSS внешний вид

Пример <стиль> .button { ширина: 60 ​​пикселей; высота: 20 пикселей; выравнивание текста: центр; шрифт: 11px / 12px Verdana, Arial, Sans-Serif; внешний вид: кнопка; }

Вот …

Кнопка?

Свойство внешнего вида CSS позволяет веб-авторам изменять внешний вид элементов HTML, чтобы они напоминали собственные элементы управления пользовательского интерфейса (UI).

Синтаксис

внешний вид: <значение>

Возможные значения

Обратите внимание, что на момент написания свойство внешний вид было исключено из черновика спецификации CSS3, однако это значения, которые были предложены, и возможно, что свойство может быть изменено в будущем. .

значок
небольшое изображение объекта, часто с именем или меткой.
окно
окно просмотра, поверхность в рамке, используемая для представления объектов и контента для просмотра и взаимодействия пользователя. Есть несколько конкретных типов окон:
настольный
окно, используемое для представления системы в целом, которое часто содержит другие окна.
рабочее пространство
окно, используемое для представления проекта или приложения, которое может содержать другие окна, обычно со строкой заголовка, которая показывает имя проекта или приложения.
документ
окно, используемое для представления пользовательского документа, обычно с заголовком, в котором отображается его имя. Также может использоваться для представления папок или каталогов в файловой системе.
подсказка
окно, которое используется для временного отображения информации или справки об объекте. Также называется «информация» в системных цветах CSS2.
диалог
окно, используемое для представления уведомления или альтернатив, которые пользователь может выбрать как часть действия, предпринимаемого пользователем.В системных шрифтах CSS2 также называется «окно сообщения».
кнопка
небольшой объект, обычно помеченный текстом, который представляет выбор пользователя.
кнопочный
кнопка, имеющая границу вокруг нее, часто скошенную, чтобы казаться трехмерной, как если бы она была приподнята. В системных шрифтах CSS2 также называется «заголовок».
гиперссылка
кнопка, представляющая гипертекстовую ссылку, часто такую ​​же простую, как обычный текст, подчеркнутую и, возможно, окрашенную по-разному.
радиокнопка
кнопка, которая показывает, отмечена ли она, с помощью маленького кружка рядом с меткой кнопки. Когда кнопка отмечена, внутри круга может быть диск. Неопределенное состояние (не отмеченное или не отмеченное) может быть обозначено другим графическим изображением в круге.
флажок
кнопка, которая показывает, отмечена ли она, с помощью небольшого поля рядом с меткой кнопки.Когда кнопка отмечена, внутри поля может быть значок «x» или галочка. Неопределенное состояние (не отмеченное и не отмеченное флажком) может быть обозначено чертой '-', квадратом или другим графическим изображением в поле.
пункт меню
- выбор в меню, который также может действовать как метка для вложенного (иерархического) меню.
вкладка
- кнопка, представляющая метку панели в интерфейсе с вкладками.
меню
- набор опций, из которых пользователь может выбирать, возможно, более одной за раз.Есть несколько конкретных типов меню.
меню
меню меню, обычно расположенное линейно в виде горизонтальной полосы.
раскрывающееся меню
меню, в котором отображается имя меню, а параметры остаются скрытыми до тех пор, пока пользователь не активирует меню. Когда пользователь отпускает или деактивирует меню, параметры снова скрываются.
всплывающее меню
меню, в котором все, кроме текущего выбранного параметра, остаются скрытыми до тех пор, пока пользователь не активирует меню.Когда пользователь отпускает или деактивирует меню, все, кроме выбранной опции, снова скрываются.
список-меню
- список опций, из которых пользователь может выбирать, возможно, более одной за раз.
радиогруппа
меню, в котором параметры отображаются в виде переключателей.
группа флажков
меню, в котором параметры отображаются в виде флажков.
контурное дерево
меню, в котором параметры могут быть показаны или скрыты с помощью небольших виджетов, часто представленных маленьким треугольником или знаками плюс и минус.
диапазон
- элемент управления, который отображает текущий параметр, возможно, графически и позволяет пользователю выбирать другие параметры, например, перетаскивая ползунок или вращая ручку.
поле
область, предоставляемая пользователю для ввода или редактирования значения, обычно с помощью клавиатуры. Есть несколько специальных полей.
комбинированный блок
поле, которое сопровождается меню предустановленных значений, которые можно использовать для быстрого ввода общих или типичных значений.
подпись
поле для ввода подписи.
пароль
поле для ввода пароля. Обычно текст отображается как набор маркеров или прямоугольников, чтобы скрыть значение.

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

начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как при наследовании или при начальном , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Основная информация об имуществе

Начальное значение
нет
Применимо к
Все элементы
Унаследовано?
№
Медиа
Визуальный

Пример кода

Базовый CSS

внешний вид: кнопка;

Рабочий пример в HTML-документе

Пример <стиль> .button { ширина: 60 ​​пикселей; высота: 20 пикселей; выравнивание текста: центр; шрифт: 11px / 12px Verdana, Arial, Sans-Serif; внешний вид: кнопка; }

Вот ...

Кнопка?

Попробуй

Спецификации CSS

Поддержка браузера

Следующая таблица предоставлена ​​Caniuse.com показывает уровень поддержки этой функции браузером.

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Эта практика не рекомендуется W3C, однако во многих случаях единственный способ проверить свойство - это включить расширение CSS, совместимое с вашим браузером.

Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и, когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.

Многие разработчики используют Autoprefixer, который представляет собой постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

Минутку ...

Включите файлы cookie и перезагрузите страницу.

Это автоматический процесс. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.

Подождите до 5 секунд…

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] ) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] +! ! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [ ] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) - []) + (! + [] - (!! [] )) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [ ] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) - [] + []) + (+ !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) »

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) - []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] +! ! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [])) / + (( + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []))

+ ((! + [ ] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + ( !! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! [] ) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) +! ! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] +! ! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] ) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! [ ]) + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] +! ! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [] )) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) - []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] - (! ! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! [])) / + ((+ !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] +! ! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + ( !! []) + !!

-моз-внешний вид собственности | -webkit-appearance свойство CSS (каскадные таблицы стилей)

Задает режим отрисовки темы для элемента.Позволяет сделать элемент похожим на стандартный элемент пользовательского интерфейса.

По умолчанию: нет .

В этом примере показано использование свойств -moz-appearance и -webkit-appearance :

Комментарии пользователей

-moz-mac-unified-toolbar Используйте единую тему панели инструментов Macintosh для визуализации объекта. Поддерживается в Firefox с версии 3.5.
-moz-win-browsertabbar-toolbox Используйте тему панели инструментов панели вкладок браузера для визуализации объекта.
-moz-win-communications-toolbox Используйте тему панели инструментов связи для визуализации объекта.
-moz-win-media-toolbox Используйте тему панели инструментов мультимедиа для визуализации объекта.
кнопка Используйте тему кнопки для визуализации объекта.
пуговица со скосом Используйте тему скоса кнопки для рендеринга объекта.
пуговица маленькая Используйте тему маленькой кнопки для визуализации объекта.
каретка Используйте тему каретки для визуализации объекта.
флажок Используйте тему флажка для визуализации объекта.
чекбокс-контейнер Используйте тему контейнера флажков для рендеринга объекта.
флажок маленький Используйте небольшую тему флажка для визуализации объекта.
диалог Используйте тему диалога для визуализации объекта.
наследовать Получает значение этого свойства из вычисленного стиля родительского элемента.
список Используйте тему списка для визуализации объекта.
список Используйте тему listitem для визуализации объекта.
меню Используйте тему меню для визуализации объекта.
менюлист Используйте тему списка меню для визуализации объекта.
кнопка меню Используйте тему кнопки меню «Список» для визуализации объекта.
текст-менюлист Используйте текстовую тему списка меню для визуализации объекта.
текстовое поле меню Используйте тему текстового поля списка меню для визуализации объекта.
нет Не используйте тему виджетов.
индикатор выполнения Используйте тему индикатора выполнения для визуализации объекта.
кнопочный Используйте тему кнопки для рендеринга объекта.
радио Используйте тему радио для визуализации объекта.
радиоконтейнер Используйте тему радио-контейнера для визуализации объекта.
радио-малая Используйте небольшую тему радио для визуализации объекта.
полоса прокрутки Используйте тему полосы прокрутки для визуализации объекта.
полоса прокрутки кнопка вниз Используйте тему кнопки полосы прокрутки вниз для визуализации объекта.
полоса прокрутки - левая кнопка Используйте тему левой полосы прокрутки для визуализации объекта.
полоса прокрутки - правая Используйте тему правой кнопки полосы прокрутки для визуализации объекта.
полоса прокрутки, кнопка вверх Используйте тему кнопки полосы прокрутки для визуализации объекта.
полоса прокрутки горизонтальный захват Используйте тему горизонтальной полосы прокрутки для визуализации объекта.
полоса прокрутки вертикальный захват Используйте тему вертикальной полосы прокрутки для рендеринга объекта.
scrollbarthumb-горизонтальный Используйте тему горизонтальной прокрутки для рендеринга объекта.
scrollbarthumb-вертикальный Используйте тему вертикальной прокрутки для рендеринга объекта.
горизонтальная полоса прокрутки Используйте тему горизонтальной полосы прокрутки для визуализации объекта.
scrollbartrack - вертикальный Используйте тему вертикальной полосы прокрутки для визуализации объекта.
поле поиска Используйте тему поля поиска для визуализации объекта.
кнопка отмены поля поиска Используйте тему кнопки отмены поля поиска для визуализации объекта.
украшение поля поиска Используйте тему поля поиска для визуализации объекта.
поле поиска, кнопка результатов Используйте тему кнопки результатов поля поиска для визуализации объекта.
оформление поля поиска Используйте тему оформления результатов поля поиска для визуализации объекта.
сепаратор Используйте тему разделителя для визуализации объекта.
слайдер горизонтальный Используйте тему горизонтального слайдера для визуализации объекта.
слайдер вертикальный Используйте тему вертикального слайдера для визуализации объекта.
слайдер с пальцем по горизонтали Используйте тему горизонтального слайдера для визуализации объекта.
слайдер с пальцем вертикальный Используйте тему вертикального слайдера для визуализации объекта.
квадратная кнопка Используйте тему квадратной кнопки для визуализации объекта.
строка состояния Используйте тему строки состояния для визуализации объекта.
выступ Используйте тему вкладок для визуализации объекта.
выступ, левый край Используйте левый край темы вкладки для визуализации объекта.
панели вкладок Используйте тему панелей вкладок для визуализации объекта.
текстовое поле Используйте тему textarea для рендеринга объекта.
текстовое поле Используйте тему текстового поля для визуализации объекта.
панель инструментов Используйте тему панели инструментов для визуализации объекта.
кнопка панели инструментов Используйте тему кнопок панели инструментов для визуализации объекта.
ящик для инструментов Используйте тему панели инструментов для визуализации объекта.
подсказка Используйте тему всплывающей подсказки для визуализации объекта.
treeheadercell Используйте тему treeheadercell для визуализации объекта.
treeheadersortarrow Используйте тему treeheadersortarrow для визуализации объекта.
элемент дерева Используйте тему treeitem для визуализации объекта.
ветвистая Используйте ветвистую тему для рендеринга объекта.
ветвисто-открытый Используйте тему Treetwistyopen для визуализации объекта.
дерево Используйте древовидную тему для рендеринга объекта.

-webkit-appearance_w3cschool

CSS

  1. Анимации и переходы 0
    1. @keyframes
    2. <функция синхронизации>
    3. анимация
    4. анимация-задержка
    5. анимация-направление
    6. продолжительность анимации
    7. режим заливки анимации
    8. количество итераций анимации
    9. имя-анимации
    10. состояние воспроизведения анимации
    11. функция времени анимации
    12. CSS анимации
    13. CSS-анимация: обнаружение поддержки CSS-анимации
    14. CSS-анимация: советы
    15. CSS-анимация: использование CSS-анимации
    16. CSS переходы
    17. CSS-переходы: использование CSS-переходов
    18. кубическая Безье ()
    19. легкость
    20. легкость в
    21. легкость входа
    22. облегчение
    23. осталось
    24. высота линии
    25. линейный
    26. верно
    27. ступенька
    28. шаг-старт
    29. шаги ()
    30. верхняя
    31. переход
    32. задержка перехода
    33. Продолжительность перехода
    34. переходная собственность
    35. временная функция перехода
    36. вертикальное выравнивание
    37. z-индекс
  2. Фоны и границы 0
    1. <позиция>
    2. задний план
    3. фоновое приложение
    4. фоновый клип
    5. фоновый цвет
    6. изображение на заднем плане
    7. фон-происхождение
    8. фоновая позиция
    9. background-position-x
    10. background-position-y
    11. фон-повтор
    12. размер фона
    13. граница
    14. нижняя граница
    15. граница нижнего цвета
    16. граница-нижний-левый-радиус
    17. граница-нижний-правый-радиус
    18. border-bottom-style
    19. ширина нижней границы
    20. цвет границы
    21. граница-изображение
    22. граница-изображение-начало
    23. граница-изображение-повтор
    24. граница-изображение-фрагмент
    25. граница-изображение-источник
    26. ширина границы изображения
    27. граница слева
    28. граница-левый-цвет
    29. граница-левый стиль
    30. граница-левая-ширина
    31. border-radius
    32. граница справа
    33. граница-правый-цвет
    34. граница правого стиля
    35. граница-правая-ширина
    36. стиль границы
    37. верхняя граница
    38. цвет верхней границы
    39. граница-верх-левый-радиус
    40. граница-верх-правый-радиус
    41. стиль границы сверху
    42. ширина верхней границы
    43. ширина рамки
    44. тень коробки
    45. Фон и границы CSS
    46. CSS Background and Borders: Генератор граничных изображений
    47. Фон и границы CSS: генератор радиуса границы
    48. CSS Background and Borders: масштабирование фоновых изображений
    49. Фон и границы CSS: использование нескольких фонов CSS
  3. Базовая модель коробки 0
    1. авто
    2. Модель коробки CSS
    3. плавать
    4. высота
    5. прибыль
    6. край-низ
    7. маржа слева
    8. маржа справа
    9. верхняя граница
    10. переполнение
    11. переполнение-x
    12. переполнение
    13. набивка
    14. обивка-дно
    15. отступ слева
    16. отступ справа
    17. обивка
    18. видимость
    19. ширина
  4. Базовый пользовательский интерфейс 0
    1. :по умолчанию
    2. : неопределенный
    3. :инвалид
    4. :по желанию
    5. :требуется
    6. : действительно
    7. внешний вид
    8. размер коробки
    9. цвет каретки
    10. Пользовательский интерфейс CSS
    11. курсор
    12. контур
    13. контур-цвет
    14. контур-смещение
    15. контурный стиль
    16. контур-ширина
    17. изменить размер
    18. переполнение текста
    19. выбор пользователя
  5. Выравнивание коробки 0
    1. выровнять себя
    2. обосновать элементы
    3. оправдываться
  6. Каскадирование и наследование 0
    1. все
    2. начальный
    3. вернуться
    4. сброшен
  7. цвет 0
    1. <цвет>
    2. цвет
    3. Цвета CSS
    4. currentColor
    5. hsl ()
    6. hsla ()
    7. непрозрачность
    8. rgb ()
    9. rgba ()
    10. прозрачный
  8. Композиция и смешивание 0
    1. фоновый режим наложения
    2. режим смешивания
    3. изоляция
    4. режим смешивания
  9. Условные правила 0
    1. @supports
    2. Ат-правило
    3. Условные правила CSS
  10. Стили счетчиков 0
    1. @ встречный стиль
    2. @ встречный стиль.аддитивные символы
    3. @ counter-style.fallback
    4. @ counter-style.negative
    5. @ counter-style.pad
    6. @ counter-style.prefix
    7. @ counter-style.range
    8. @ counter-style.speak-as
    9. @ counter-style.suffix
    10. @ встречный стиль.символы
    11. @ counter-style.system
  11. Адаптация устройства 0
    1. @viewport
    2. @ viewport.height
    3. @ viewport.max-height
    4. @ viewport.max-width
    5. @ viewport.max-zoom
    6. @viewport.мин-высота
    7. @ viewport.min-width
    8. @ viewport.min-zoom
    9. @ viewport.orientation
    10. @ viewport.user-zoom
    11. @ viewport.width
    12. @ viewport.zoom
    13. Адаптация устройства CSS
  12. Расширения 0
    1. -моз-внешний вид
    2. -moz-фон-встроенная-политика
    3. -moz-привязка
    4. -moz-границы-нижние цвета
    5. -moz-границы-изображение
    6. -moz-границы-слева-цвета
    7. -moz-границы-права-цвета
    8. -moz-границы-верхние цвета
    9. -moz-float-edge
    10. -moz-force-сломанный-значок-изображение
    11. -moz-изображение-rect
    12. -moz-изображение-регион
    13. -moz-orient
    14. -moz-outline
    15. -moz-контур-радиус
    16. -moz-контур-радиус-нижний левый
    17. -moz-контур-радиус-снизу-справа
    18. -moz-контур-радиус-верхний край
    19. -moz-outline-radius-topright
    20. -moz-outline-style
    21. -moz-контур-ширина
    22. -moz-размер стека
    23. -moz-текст-мигание
    24. -moz-пользователь-фокус
    25. -moz-пользовательский ввод
    26. -moz-пользователь-изменить
    27. -moz-окно-тень
    28. -webkit-внешний вид
    29. -webkit-border-до
    30. -webkit-box-отражать
    31. -webkit-переполнение-прокрутка
    32. -webkit-нажмите-выделить-цвет
    33. -webkit-текст-заливка-цвет
    34. -webkit-text-stroke
    35. -webkit-текст-обводка-цвет
    36. -webkit-text-stroke-width
    37. -webkit-touch-callout
    38. : -moz-полноэкранный-предок
    39. : -moz-placeholder
    40. : -moz-submit-invalid
    41. : -moz-tree-image
    42. : -моз-дерево-извилистое
    43. : -moz-ui-invalid
    44. : -moz-ui-valid
    45. :: - moz-placeholder
    46. :: - moz-progress-bar
    47. :: - moz-диапазон-прогресс
    48. :: - moz-range-thumb
    49. :: - moz-range-track
    50. :: - webkit-input-placeholder
    51. :: - webkit-progress-bar
    52. :: - webkit-progress-внутренний-элемент
    53. :: - значение-прогресса-webkit
    54. :: - вебкит-слайдер-запускаемый-трек
    55. :: - webkit-слайдер-большой палец
  13. Эффекты фильтра 0
    1. фон-фильтр
    2. фильтр
  14. Гибкая компоновка коробки 0
    1. выровнять контент
    2. выровнять элементы
    3. CSS Flexible Box Layout
    4. CSS Flexible Box Layout: расширенные макеты с помощью flexbox
    5. CSS Flexible Box Layout: Использование гибких CSS-блоков
    6. CSS Flexible Box Layout: использование flexbox для компоновки веб-приложений
    7. дисплей
    8. сгибать
    9. гибкая основа
    10. гибкое направление
    11. гибкий поток
    12. гибкий рост
    13. гибко-усадочный
    14. гибкая пленка
    15. обосновать содержание
    16. мин-высота
    17. минимальная ширина
    18. заказ
  15. Шрифты 0
    1. @ font-face
    2. @ font-face.семейство шрифтов
    3. @ font-face.font-style
    4. @ font-face.src
    5. @ font-face.unicode-range
    6. @ font-feature-values
    7. CSS шрифты
    8. шрифт
    9. семейство шрифтов
    10. настройки-функции-шрифта
    11. font-kerning
    12. шрифт-язык-переопределение
    13. размер шрифта
    14. размер шрифта настроить
    15. font-stretch
    16. стиль шрифта
    17. шрифт-синтез
    18. вариант шрифта
    19. вариант шрифта альтернативы
    20. шрифт-вариант-заглавные буквы
    21. шрифт-вариант-восточно-азиатский
    22. шрифт-вариант-лигатуры
    23. шрифт-вариант-числовой
    24. шрифт-вариант-позиция
    25. настройки-вариации-шрифта
    26. font-weight
  16. Фрагментация 0
    1. коробка-украшение-перерыв
    2. перерыв после
    3. перерыв перед
    4. взлом
    5. сирот
    6. вдовы
  17. Полноэкранный API 0
    1. ::фон
    2. :полноэкранный
  18. Созданный контент 0
    1. содержание
  19. Макет сетки 0
    1. CSS-сетка
    2. Макет сетки CSS
    3. CSS Grid Layout: автоматическое размещение в CSS Grid Layout
    4. CSS Grid Layout: основные концепции компоновки сетки
    5. Макет сетки CSS: выравнивание поля в макете сетки CSS
    6. Макет CSS-сетки: CSS-сетка и прогрессивное улучшение
    7. Макет сетки CSS: макет сетки CSS и доступность
    8. Макет сетки CSS: сетка CSS, логические значения и режимы записи
    9. Макет сетки CSS: области шаблона сетки
    10. Макет сетки CSS: макет с использованием именованных линий сетки
    11. Макет сетки CSS: размещение на основе линий с помощью сетки CSS
    12. CSS Grid Layout: реализация общих макетов с помощью CSS Grid
    13. CSS Grid Layout: реализация общих макетов с помощью CSS Grid Layout
    14. CSS Grid Layout: взаимосвязь макета сетки
    15. подходящий контент
    16. значение гибкости
    17. сетка
    18. сетка
    19. сетка-автоматические столбцы
    20. сетка-автоматический поток
    21. сетка-автоматические строки
    22. сетка-столбец
    23. конец столбца сетки
    24. сетка-столбец-разрыв
    25. сетка-столбец-начало
    26. сетка
    27. сетка
    28. конец строки сетки
    29. сетка-ряд-промежуток
    30. сетка-строка-начало
    31. сетка-шаблон
    32. сетка-шаблон-области
    33. сетка-шаблон-столбцы
    34. сетка-шаблон-строки
    35. мин Макс
    36. повторение
  20. Значения изображения 0
    1. <градиент>
    2. <изображение>
    3. CSS изображения
    4. Изображения CSS: реализация спрайтов изображений в CSS
    5. Изображения CSS: использование градиентов CSS
    6. элемент()
    7. ориентация изображения
    8. рендеринг изображений
    9. линейный градиент ()
    10. подходящий объект
    11. объект-позиция
    12. радиальный градиент ()
    13. повторяющийся линейный градиент ()
    14. повторяющийся радиальный градиент ()
  21. Индекс 0
    1. индекс
  22. Встроенный макет 0
    1. буквица
    2. начальная буква
  23. Списки и счетчики 0
    1. :: маркер
    2. <счетчик>
    3. счетчик
    4. сброс счетчика
    5. Списки и счетчики CSS
    6. Списки и счетчики CSS: постоянный отступ списка
    7. Списки и счетчики CSS: использование счетчиков CSS
    8. индивидуальный идентификатор
    9. список
    10. изображение в стиле списка
    11. позиция в стиле списка
    12. список-стиль-тип
  24. Логические свойства 0
    1. размер блока
    2. граница-блок-конец
    3. цвет границы блока
    4. стиль границы-блока-конца
    5. ширина границы блока
    6. граница-блок-начало
    7. цвет границы блока
    8. стиль начала блока границы
    9. ширина начала блока границы
    10. граница-строка-конец
    11. граница-встроенный-конечный цвет
    12. граница-встроенный-конец-стиль
    13. граница-встроенный-конец-ширина
    14. граница-инлайн-начало
    15. граница-встроенный-начальный цвет
    16. граница-встроенный-начальный стиль
    17. граница-инлайн-начальная ширина
    18. Логические свойства CSS
    19. встроенный размер
    20. край блока
    21. маржа-блок-начало
    22. margin-inline-end
    23. маржа-инлайн-начало
    24. максимальный размер блока
    25. max-inline-size
    26. минимальный размер блока
    27. min-inline-size
    28. offset-block-end
    29. смещение-блок-начало
    30. offset-inline-end
    31. offset-inline-start
    32. padding-block-end
    33. padding-block-start
    34. заполнение-встроенный-конец
    35. обивка-строка-начало
  25. Маскировка 0
    1. зажим
    2. маска-зажим
    3. маска-композит
    4. маска-изображение
    5. режим маски
    6. маска происхождения
    7. положение маски
    8. маска-повтор
    9. размер маски
    10. тип маски
  26. Медиа-запросы 0
    1. @Импортировать
    2. @средства массовой информации
    3. @средства массовой информации.любое парение
    4. @ media.any-pointer
    5. @ media.aspect-ratio
    6. @ media.color
    7. @ media.color-index
    8. @ media.device-соотношение сторон
    9. @ media.device-height
    10. @ media.device-width
    11. @средства массовой информации.режим отображения
    12. @ media.grid
    13. @ media.height
    14. @ media.hover
    15. @ media.inverted-colors
    16. @ media.light-level
    17. @ media.monochrome
    18. @ media.orientation
    19. @ media.overflow-block
    20. @средства массовой информации.встроенный в линию
    21. @ media.pointer
    22. @ media.resolution
    23. @ media.scan
    24. @ media.scripting
    25. @ media.update-frequency
    26. @ media.width
    27. <соотношение>
    28. <разрешение>
    29. Медиа-запросы
    30. Медиа-запросы: тестирование медиа-запросов
    31. Медиа-запросы: использование медиа-запросов
  27. Разное 0
    1. @документ
    2. @styleset
    3. Каскад
    4. Комментарии
    5. CSS-анимированные свойства
    6. CSS Box Model: генератор прямоугольной тени
    7. Цвета CSS: инструмент выбора цвета
    8. CSS Разное
    9. Позиционирование CSS: понимание индекса z
    10. Позиционирование CSS: понимание индекса z: контекст наложения
    11. Справочник CSS
    12. Селекторы CSS: использование псевдокласса: target в селекторах
    13. Типы CSS
    14. Пользовательский интерфейс CSS: использование значений URL-адреса для свойства курсора
    15. ime-режим
    16. наследство
    17. Начальное значение
    18. Режим макета
    19. маркер-смещение
    20. коробка для перелива
    21. Конфиденциальность и селектор: посещено
    22. Псевдоэлементы
    23. Замененный элемент
    24. разрешенное значение
    25. точки-привязки прокрутки-x
    26. точки привязки прокрутки-y
    27. scroll-snap-type-x
    28. scroll-snap-type-y
    29. Сокращенные свойства
    30. Специфика
    31. Синтаксис
    32. размер текста настроить
    33. сенсорное действие
    34. использованное значение
    35. Использование переменных CSS
    36. Использование медиа-запросов из кода
    37. Использование значений URL-адреса для свойства курсора
    38. Модель визуального форматирования
    39. изменится
  28. Разное Уровень 1 0
    1. коробчатая модель
    2. Чисто
    3. CSS Box Model: Введение в блочную модель CSS
    4. отступ текста
    5. текстовое преобразование
    6. межсловный интервал
  29. Разное Уровень 2 0
    1. @charset
    2. <форма>
    3. реальная стоимость
    4. граница-коллапс
    5. пограничный интервал
    6. дно
    7. сторона подписи
    8. вычисленное значение
    9. CSS Box Model: освоение схлопывания полей
    10. Наборы символов CSS
    11. CSS-контент
    12. Таблица CSS
    13. пустые ячейки
    14. падение маржи
    15. максимальная высота
    16. Максимальная ширина
    17. цитаты
    18. rect ()
    19. указанное значение
    20. сервировка стола
  30. Путь движения 0
    1. смещение
    2. расстояние смещения
    3. смещение пути
    4. смещение-поворот
  31. Макет с несколькими столбцами 0
    1. счетчик столбцов
    2. заполнение столбца
    3. колонна-пробел
    4. столбец-правило
    5. цвет правила столбца
    6. стиль правила столбца
    7. ширина правила столбца
    8. столбец
    9. ширина колонки
    10. столбцы
    11. Столбцы CSS
    12. Столбцы CSS: использование макетов с несколькими столбцами
  32. Пространства имён 0
    1. @namespace
    2. Пространства имен CSS
  33. Просмотр объектной модели 0
    1. Вид CSSOM
    2. поведение прокрутки
  34. Страничные СМИ 0
    1. :первый
    2. :осталось
    3. :верно
    4. @page
    5. @page.кровоточить
    6. @ page.marks
    7. @размер страницы
    8. CSS-страницы
    9. разрыв страницы после
    10. разрыв страницы до
    11. разрыв страницы внутрь
  35. Позиционированный макет 0
    1. CSS позиционирование
    2. позиция
  36. Псевдоэлементы 0
    1. :: - ms-fill
    2. :: - ms-fill-lower
    3. :: - ms-fill-upper
    4. :: - ms-thumb
    5. :: - ms-track
    6. :: грамматическая ошибка
    7. :: заполнитель
    8. :: выбор
    9. :: орфографическая ошибка
  37. Рубиновый макет 0
    1. CSS Ruby
    2. рубиновый
    3. рубиновая позиция
  38. Масштабируемая векторная графика 0
    1. клип-путь
    2. CSS-маски
    3. Межбуквенное расстояние
    4. маска
    5. указатель событий
    6. рендеринг текста
  39. Scroll Snap 0
    1. Точки привязки прокрутки CSS
    2. координата привязки прокрутки
    3. пункт назначения с привязкой к прокрутке
    4. тип прокрутки
  40. Селекторы 0
    1. : -ms-input-placeholder
    2. ::после
    3. ::перед
    4. ::первое письмо
    5. ::первая линия
    6. : active
    7. :любой

Кнопки стиля в iOS WebKit и -webkit-appearance: нет

Недавно я столкнулся с проблемой при стилизации кнопок, из-за которой я некоторое время тянул за волосы.Мои кнопки выглядели так, как должны выглядеть в настольных браузерах, но когда я пошел посмотреть в Safari для iOS, большая часть моего CSS не была применена.

Это было довольно непонятно, так как я не мог вспомнить, чтобы у меня были проблемы с кнопками раньше в Safari для iOS. После внимательного изучения CSS, который я использовал для этих конкретных кнопок, и CSS, который я использовал ранее, мне удалось выяснить, в чем разница.

Оказалось, что все кнопки, которые выглядели в iOS Safari так же, как и в настольных браузерах, имели фоновый градиент.По какой-то причине применение фонового градиента заставляет iOS для Safari отказываться от собственного стиля кнопок и применять все указанные вами свойства CSS вместо некоторых из них.

Пока все хорошо. Но кнопки, над которыми я работал в этот раз, не имели градиентного фона. Что ж, Safari для iOS все равно, какие цвета использует градиент - задав одинаковые начальный и конечный цвета, вы получите сплошной цвет фона, а остальные свойства CSS будут применены. Насколько я могу судить, поведение одинаково в iOS 4 и 5 и влияет на все браузеры iOS на основе WebKit.

Для некоторых примеров взгляните на созданную мной демонстрационную страницу Styling iOS WebKit buttons.

Хотя применение фиктивного градиента действительно решило проблему, это выглядит довольно хакерским. И есть способ попроще. После небольшого поиска я нашел пару статей, в которых говорилось о свойстве -webkit-appearance (описанном в Справочнике Safari CSS). Это свойство «Изменяет внешний вид кнопок и других элементов управления, чтобы он напоминал собственные элементы управления». Поскольку я не хотел, чтобы кнопки выглядели как собственные, я добавил объявление -webkit-appearance: none в CSS для моих кнопок, и это помогло.Safari для iOS применил мой CSS без фонового градиента.

Итак, если вы хотите, чтобы CSS для кнопок применялся в браузерах iOS WebKit, вы можете либо использовать градиент для фона, либо добавить объявление -webkit-appearance: none .

No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *