2016-08-21 2 views
-1

enter image description hereИзменение HTML «выберите» по умолчанию тега стрелка

Я пытаюсь изменить HTML «выберите» по умолчанию стрелка тега в одной подобной на фото прилагается. Любые идеи, пожалуйста?

+1

Есть несколько рабочих решений здесь, [выберите стрелку изменить стиль] (http://stackoverflow.com/q/14218307/6395782) – DannyBoi

ответ

1

Вот чистое решение для CSS: вы можете скрыть стрелку по умолчанию и отобразить другую, используя фоновое изображение. Это пример, который вы можете настроить в соответствии с вашими потребностями.

select { 
    width: 100px; 
    padding-left: 5px; 
    border: 1px solid #ccc; 
    height: 25px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: url(http://www.stackoverflow.com/favicon.ico) 95%/20% no-repeat #fff; 
} 

https://jsfiddle.net/yorknche/

+0

Спасибо mxlse !!!! что решило мою проблему !!! – alimarwan

+0

Я так долго искал короткий ответ! – alimarwan

0

это то, что вы хотите, но вы должны изменить size значения в соответствии с вам нужно.

<html> 
 
<head></head> 
 
<title></title> 
 

 

 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<style> 
 
.container{ 
 
    position: absolute; 
 
    width: 150px; 
 
} 
 

 

 
select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    text-indent: 1px; 
 
    text-overflow: ''; 
 
    width: 100%; 
 
    height: 20px; 
 
    font-size: 15px; 
 
    position: absolute; 
 
    opacity: 0.5; 
 

 
} 
 

 
.set{ 
 
    position: absolute; 
 
    left: 85%; 
 
    
 
} 
 
</style> 
 

 
<body> 
 

 

 

 
<div class="container"> 
 
<i class="fa fa-angle-down set"></i> 
 
<select class="myselect"> 
 
<option>All &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option> 
 
<option>First Option</option> 
 
<option>Second Option</option> 
 
</select> 
 

 
</div> 
 

 
</body> 
 

 

 
</html>

+0

Спасибо Анурад! У меня есть вопрос, почему мы добавляем jquery