|
Сообщение от Mike_Kharkov
|
|
В шапке есть 2 селекта и мне необходимо что бы размеры и вертикальное центрирование было одинаковым в следующих браузерах
|
давно использую такой способ стилизации селектов:
<!DOCTYPE html>
<html>
<head>
<style>
.select-wrapper {
position: relative;
overflow: hidden;
border: 1px solid #e8e8e8;
border-radius: 5px;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffff, EndColorStr=#eeeeee, GradientType=0);
box-shadow: 0 0 4px #ccc;
height: 22px;
width: 150px;
margin: 10px;
}
.select-wrapper select {
position: relative;
width: 100%;
opacity: 0;
/** IE7 disable style **/
filter: expression('filter: none;');
-ms-filter: "Alpha(opacity=0)";
z-index: 1;
top: 0;
left: 0;
}
.select-wrapper:before {
position: absolute;
content: attr(data-select-value);
white-space: nowrap;
font-family: Tahoma, Arial;
font-size: 12px;
color: #000;
height: 100%;
width: 100%;
margin: 4px 0 0 5px;
}
.select-wrapper .select-arrow {
position: absolute;
background: inherit;
filter: inherit;
top: 0;
right: 0;
height: 100%;
width: 20px;
}
.select-wrapper .select-arrow:after {
position: absolute;
content: " ";
border: 0;
border-top: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
width: 0;
height: 0;
top: 50%;
right: 4px;
margin-top: -2px;
}
.select-wrapper select:focus + .select-arrow:after {
border-top: 5px solid #555;
}
</style>
</head>
<body>
<div class="select-wrapper" data-select-value="- select city -">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option>- select city -</option>
<option value="1">Saint-Petersburg</option>
<option value="2">Moscow</option>
<option value="3">New York</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
</body>
</html>
Правда в ИЕ7 они остаются стандартными, потому как там нет псевдо-элементов after/before... Хотя лично я уже давно положил болт на ИЕ7. В остальных браузерах все пучком.