선정 된 성별 목록이 있습니다.
암호:
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select> 드롭 다운 목록의 이미지를 drop-down-icon.jpeg로 사용하고 싶습니다.
드롭 다운 아이콘 대신 버튼을 추가하고 싶습니다.
그렇게하는 방법?
답변
Firefox 에서는 옵션에 배경 이미지를 추가 할 수 있습니다.
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select> 더 나은 방법은 HTML과 CSS를 분리 할 수 있다는 것입니다
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select> CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }다른 브라우저 에서는 jQuery UI 와 같은 JS 위젯 라이브러리 ( 예 : Selectable 사용)를 사용하는 것이 유일한 방법입니다 .
jQuery UI 1.11부터 Selectmenu 위젯을 사용할 수 있으며 원하는 것에 매우 가깝습니다.
답변
내 해결책은 FontAwesome을 사용하고 라이브러리 이미지를 텍스트로 추가하는 것입니다! 유니 코드가 필요하며 여기에 있습니다 : FontAwesome Reference File forUnicodes
다음은 상태 필터의 예입니다.
<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''> All States</option>
<option value='enabled' style='color:green;'> Enabled</option>
<option value='paused' style='color:orange;'> Paused</option>
<option value='archived' style='color:red;'> Archived</option>
</select>font-family : Arial, FontAwesome을 참고하십시오 . 예제와 같이 선택을 위해 스타일을 지정해야합니다!
답변
iconselect.js를 사용할 수 있습니다. 아이콘 / 이미지 선택 (콤보 박스, 드롭 다운)
데모 및 다운로드; http://bug7a.github.io/iconselect.js/
HTML 사용법;
<div id="my-icon-select"></div>자바 스크립트 사용법;
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select");
var icons = [];
icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});
iconSelect.refresh(icons);
};답변
JavaScript / jQuery 사용을 제안하는 몇 가지 답변이 이미 있습니다. JS없이 HTML과 CSS 만 사용하는 대안을 추가하려고합니다.
기본 아이디어는 라디오 버튼과 레이블 (라디오 버튼을 활성화 / 비활성화 할) 세트를 사용하고 CSS 컨트롤을 사용하면 선택한 라디오 버튼과 관련된 레이블 만 표시되도록하는 것입니다. 여러 값을 선택할 수 있도록하려면 라디오 버튼 대신 확인란을 사용하여 값을 얻을 수 있습니다.
다음은 예입니다. 코드가 약간 더 복잡 할 수 있습니다 (특히 다른 솔루션과 비교).
.select-sim {
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
position:relative;
background:white;
border:1px solid #ccc;
overflow:hidden;
}
.select-sim::after {
content:"▼";
font-size:0.5em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}
.select-sim:hover::after {
content:"";
}
.select-sim:hover {
overflow:visible;
}
.select-sim:hover .options .option label {
display:inline-block;
}
.select-sim:hover .options {
background:white;
border:1px solid #ccc;
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:88px;
overflow-y:scroll;
}
.select-sim .options .option {
overflow:hidden;
}
.select-sim:hover .options .option {
height:22px;
overflow:hidden;
}
.select-sim .options .option img {
vertical-align:middle;
}
.select-sim .options .option label {
display:none;
}
.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
/* fix specific for Firefox */
position: absolute;
left: -10000px;
}
.select-sim .options .option input:checked + label {
display:block;
width:100%;
}
.select-sim:hover .options .option input + label {
display:block;
}
.select-sim:hover .options .option input:checked + label {
background:#fffff0;
}<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="color" value="" id="color-" checked />
<label for="color-">
<img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
</label>
</div>
<div class="option">
<input type="radio" name="color" value="red" id="color-red" />
<label for="color-red">
<img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
</label>
</div>
<div class="option">
<input type="radio" name="color" value="green" id="color-green" />
<label for="color-green">
<img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
</label>
</div>
<div class="option">
<input type="radio" name="color" value="blue" id="color-blue" />
<label for="color-blue">
<img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
</label>
</div>
<div class="option">
<input type="radio" name="color" value="yellow" id="color-yellow" />
<label for="color-yellow">
<img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
</label>
</div>
<div class="option">
<input type="radio" name="color" value="pink" id="color-pink" />
<label for="color-pink">
<img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
</label>
</div>
<div class="option">
<input type="radio" name="color" value="turquoise" id="color-turquoise" />
<label for="color-turquoise">
<img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
</label>
</div>
</div>
</div>답변
이 문제에 대한 또 다른 jQuery 크로스 브라우저 솔루션은 http://designwithpc.com/Plugins/ddSlick 이며 정확히이 용도로 사용됩니다.
답변
국가, 언어 또는 통화에서는 이모티콘을 사용할 수 있습니다.
그림 이모티콘 사용을 지원하는 거의 모든 브라우저 / OS에서 작동합니다.
select {
height: 50px;
line-height: 50px;
font-size: 12pt;
}<select name="countries">
<option value="NL">?? Netherlands</option>
<option value="DE">?? Germany</option>
<option value="FR">?? France</option>
<option value="ES">?? Spain</option>
</select>
<br /><br />
<select name="currency">
<option value="EUR">?? € EUR ?</option>
<option value="GBP">?? £ GBP ?</option>
<option value="USD">?? $ USD ?</option>
<option value="YEN">?? ¥ YEN ?</option>
</select>답변
2 색 이미지의 경우 Fontello 를 사용하고 사용하려는 사용자 정의 글리프를 가져올 수 있습니다. Illustrator에서 이미지를 만들고 SVG에 저장 한 다음 Fontello 사이트에 놓은 다음 사용자 정의 글꼴을 가져올 준비가 된 상태로 다운로드하십시오. 자바 스크립트가 없습니다!