Добавляем стиль для select

Добавляем стиль для select

Всем привет! Вчера верстал один заказ (с очень красивыми дизайном), и там надо было задать стиль для select элементов. Просто так это не сделаешь. Для этого надо знать одно, очень полезное свойство clip. О нем мы сегодня и поговорим.

Синтаксис: clip: rest(Y1, X1, Y2, X2) | auto | inherit

Теперь поговорим о том, как же нам применить это свойство для нашего select

Вот структура html, которая нам будет нужна:

1 <select size="1">

2 <option>Текст Текст</option>

3 <option>Текст Текст</option>

4 </select>

И css:

1 select{

2 border:0px;

3 position:absolute;

4 width:190px;

5 height:22px;

6 clip:rest(2px 170px 20px 2px);

7 background:#2a1a2b;

8 margin-top:3px;

9 font-family:tahoma;

10 color:#f4f4f5;

11{ border:0px; position:absolute; width:190px; height:22px; clip:rest(2px 170px 20px 2px); background:#2a1a2b; margin-top:3px; font-family:tahoma; color:#f4f4f5;

}

Конечно Вы можете сделать намного красивее. Все зависит от графики. Вы скажите: “А где делась стрелочка?” Ответ: Она где-то вверху, но она обрезана, а основное, что выводится – сдвинуто, на то кол-во пикселей, которое Вам надо. Я думаю тут вопросов не должно возникнуть.


Карта сайта


Информационный сайт Webavtocat.ru