Нужно что бы первый option
элемент был стилизован, что бы он служил как placeholder
.select-style {
position: relative;
width: 62%;
}
.select-style__select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #636363;
height: 3.125rem;
padding-left: 10px;
width: 100%;
}
.select-style__select:hover {
cursor: pointer;
}
.select-style__select::-ms-expand {
display: none;
}
.select-style__placeholder {
font-size: 1.5rem;
color: #636363;
text-transform: uppercase;
}
.select-style__arrow {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 3.375rem;
background: url(../img/icons/select-arrow.png);
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
}
<div class="select-style">
<select name="refine" id="" class="select-style__select">
<option class="select-style__placeholder">Shipping and Logistics</option>
<option value="">text</option>
<option value="">text</option>
</select>
<div class="select-style__arrow"> </div>
</div>
<div class="select-style">
<select name="spare" id="" class="select-style__select">
<option class="select-style__placeholder">Shipping and Logistics</option>
<option value="">text</option>
<option value="">text</option>
</select>
<div class="select-style__arrow"> </div>
</div>
<div class="select-style">
<select name="maker" class="select-style__select">
<option class="select-style__placeholder">Shipping and Logistics</option>
<option value="">text</option>
<option value="">text</option>
</select>
<div class="select-style__arrow"> </div>
</div>
Нужно сделать что именно первый элемент, потом в скрипте, при изменении select'a
он будет пропадать, т.е. этот элемент нужен чисто как placeholder
, пробовал стилизовать как обычный текст, но не получается, какие есть варианты?