yaparoff,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.available-tab__btn {
display: inline-block;
position: relative;
width: 157px;
height: 42px;
line-height: 42px;
background-color: transparent;
border: 1px solid #fff;
transition: color ease-out .2s, border-color ease-out .2s, background-color ease-out .2s;
text-decoration: none;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 13px;
letter-spacing: 2px;
white-space: nowrap;
vertical-align: top;
text-transform: uppercase;
box-sizing: border-box;
border-color: red;
color: red;
background-color: transparent;
}
.available-tab__btn:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}
.available-tab__btn:hover {
background-color: red;
color: #fff;
}
.available-tab__btn--black {
border-color: #000;
color: #000;
background-color: transparent;
}
.available-tab__btn--black:hover {
background-color: #000;
color: #fff;
}
.available-tab__link {
display: inline-block;
white-space: nowrap;
color: #9b9b9b;
text-decoration: underline;
transition: all .4s ease-out;
}
.available-tab__link:hover {
color: #4a90e2;
}
.available-tab__select {
display: inline-block;
width: 200px;
height: 40px;
margin-top: 30px;
margin-right: 50px;
cursor: pointer;
padding: 0 !important;
border: 1px solid grey;
}
.available-tab__select select {
display: none;
}
.available-tab__select-container {
width: 100%;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.available-tab__select-default-param {
display: block;
height: 40px;
line-height: 40px;
border-radius: 0;
transition: all .2s ease-out;
padding: 0 30px 0 10px;
color: #4a4a4a;
}
.available-tab__select-default-param span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.available-tab__select-arrow {
position: absolute;
top: 0;
right: 0;
display: block;
height: 40px;
width: 40px;
background-color: #fff;
}
.available-tab__select-arrow i {
position: absolute;
border: 0;
border-right: 1px solid #4a4a4a;
border-bottom: 1px solid #4a4a4a;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
margin-top: -5px;
margin-left: -3px;
transform: rotate(45deg);
}
.available-tab__select-arrow--opened i {
margin-top: 0;
transform: rotate(-135deg);
}
.available-tab__select-list {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border-top: 0;
background: #fff;
border: 1px solid #ddd;
margin-top: -1px;
background-clip: padding-box;
color: #444;
overflow-x: hidden;
overflow-y: auto;
padding: 15px 0;
margin: 0;
max-height: 188px;
}
.available-tab__select-list--opened {
left: 0;
}
.available-tab__select-list-item {
position: relative;
padding: 5px 10px;
font-size: 14px;
color: #272727;
line-height: 18px;
transition: color .2s ease-out;
word-wrap: break-word;
cursor: pointer;
}
.available-tab__select-list-item:hover:after, .available-tab__select-list-item--selected:after {
content: '';
position: absolute;
width: 7px;
height: 12px;
right: 15px;
top: 50%;
margin-top: -7px;
border-right: 2px solid #272727;
border-bottom: 2px solid #272727;
transform: rotate(45deg);
}
.available-tab__select-list-item.active {
border: 1px solid #A9A9A9;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".available-tab__select").on("click", function(event) {
var el = $(event.target),
list = $(".available-tab__select-list", this),
arrow = $(".available-tab__select-arrow", this),
a = $(".available-tab__select-list-item", this),
index = a.index(el),
txt = el.text(),
title = $(".available-tab__select-default-param span", this),
select = $("select", this)[0];
if (index > -1) {
title.text(txt);
a.removeClass("active").eq(index).addClass("active");
select.selectedIndex = index;
}
if($(".available-tab__select-list--opened").not(list).length) up();
list.toggleClass('available-tab__select-list--opened');
arrow.toggleClass('available-tab__select-arrow--opened');
}).find(".available-tab__select-list-item:first").addClass("active");
function up()
{
$(".available-tab__select-list--opened").removeClass("available-tab__select-list--opened");
$(".available-tab__select-arrow--opened").removeClass("available-tab__select-arrow--opened");
}
$(document).click(function(event) {
if (!$(event.target).closest(".available-tab__select").length) up()
})
});
</script>
</head>
<body>
<div class="available-tab__select">
<select data-placeholder="Ширина ботинка">
<option>Ширина ботинка</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="ee">EE</option>
</select>
<div class="available-tab__select-container">
<a class="available-tab__select-default-param">
<span>Ширина ботинка</span>
<div class="available-tab__select-arrow">
<i></i>
</div>
</a>
<div class="available-tab__select-list">
<div class="available-tab__select-list-item">Ширина ботинка</div>
<div class="available-tab__select-list-item">C</div>
<div class="available-tab__select-list-item">D</div>
<div class="available-tab__select-list-item">EE</div>
</div>
</div>
</div>
<div class="available-tab__select">
<select data-placeholder="Лезвие">
<option>Лезвие</option>
<option value="11,5">11,5</option>
<option value="12">12</option>
<option value="12,5">12,5</option>
<option value="13">13</option>
<option value="13,5">13,5</option>
<option value="14">14</option>
<option value="14,5">14,5</option>
<option value="15">15</option>
<option value="15,5">15,5</option>
</select>
<div class="available-tab__select-container">
<a class="available-tab__select-default-param">
<span>Лезвие</span>
<div class="available-tab__select-arrow">
<i></i>
</div>
</a>
<div class="available-tab__select-list">
<div class="available-tab__select-list-item">Размер</div>
<div class="available-tab__select-list-item">11,5</div>
<div class="available-tab__select-list-item">12</div>
<div class="available-tab__select-list-item">12,5</div>
<div class="available-tab__select-list-item">13</div>
<div class="available-tab__select-list-item">13,5</div>
<div class="available-tab__select-list-item">14</div>
<div class="available-tab__select-list-item">14,5</div>
<div class="available-tab__select-list-item">15</div>
<div class="available-tab__select-list-item">15,5</div>
</div>
</div>
</div>
</body>
</html>