Четверг, 25 Октября 2012 15:43

WebKit Appearance

Written by 
Оцени эту запись
(3 Голоса)

Мы значем, что у каждого браузера есть своя персональная стилизация элементов - скроллбары, кнопочки, значки, элементы управления. Их внешний вид в браузерах WebKit задается при помощи свойства -webkit-appearance.

 

Приведу список значений данного свойства:

 

 

<div style="-webkit-appearance: none"></div>
<div style="-webkit-appearance: button"></div>
<div style="-webkit-appearance: button-bevel"></div>
<div style="-webkit-appearance: caret"></div>
<div style="-webkit-appearance: checkbox"></div>
<div style="-webkit-appearance: default-button"></div>
<div style="-webkit-appearance: listbox"></div>
<div style="-webkit-appearance: listitem"></div>
<div style="-webkit-appearance: media-fullscreen-button"></div>
<div style="-webkit-appearance: media-mute-button"></div>
<div style="-webkit-appearance: media-play-button"></div>
<div style="-webkit-appearance: media-seek-back-button"></div>
<div style="-webkit-appearance: media-seek-forward-button"></div>
<div style="-webkit-appearance: media-slider"></div>
<div style="-webkit-appearance: media-sliderthumb"></div>
<div style="-webkit-appearance: menulist"></div>
<div style="-webkit-appearance: menulist-button"></div>
<div style="-webkit-appearance: menulist-text"></div>
<div style="-webkit-appearance: menulist-textfield"></div>
<div style="-webkit-appearance: push-button"></div>
<div style="-webkit-appearance: radio"></div>
<div style="-webkit-appearance: searchfield"></div>
<div style="-webkit-appearance: searchfield-cancel-button"></div>
<div style="-webkit-appearance: searchfield-decoration"></div>
<div style="-webkit-appearance: searchfield-results-button"></div>
<div style="-webkit-appearance: searchfield-results-decoration"></div>
<div style="-webkit-appearance: slider-horizontal"></div>
<div style="-webkit-appearance: slider-vertical"></div>
<div style="-webkit-appearance: sliderthumb-horizontal"></div>
<div style="-webkit-appearance: sliderthumb-vertical"></div>
<div style="-webkit-appearance: square-button"></div>
<div style="-webkit-appearance: textarea"></div>
<div style="-webkit-appearance: textfield"></div>
 
 
 
Это можно даже посмотреть. Но большинство из них используются в контексте, потому их внешний вид будет сможно оценить. Хотя по смыслу в основном понятно:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

Кроме описания самого свойства, хочу еще сказать, что при стилизации таких необычных элементов часто достаточно просто указать :

 

-webkit-appearance: none

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов