Witam,

jak dobrać się do tego ptaszka rozwijanego, aby mi się nie zmieniał gdy najadę na select? Poniżej stan bez najechania i po najechaniu. Chcę aby stan po najechaniu czy rozwinięciu był taki sam jak bez najechania.

Całe szczęście, nie ma takiej możliwości.

Na upartego możesz zamienić select na divy. Dużo zabawy i raczej mało pożyteczne .

[HTML] pobierz, plaintext 
<script type="text/javascript">
 
	function rozwin(){
		document.getElementById('list').setAttribute('style', '');
	}
 
	function ustawWartosc(id){
		document.getElementById('wybrany').setAttribute('value', ''+id+'');
	}
 
</script>
 
<style>
 
#list{
	position: absolute;
	text-indent: 5px;
	border:	1px solid #000000;
	width:	130px;
	overflow:	hidden;
	cursor:	pointer;
}
 
 
ul{
	list-style-type:	none;
	padding:	0px;
	margin:	0px;
}
 
li:hover{
	background-color:	#CCCCCC;
}
 
</style>
 
<div id="list" onClick="rozwin();" style="height: 20px;">
	<ul>
		<li id=""><strong>Wybierz miasto:</strong></li>
		<li id="1" onClick="ustawWartosc(1);">Wroclaw</li>
		<li id="2" onClick="ustawWartosc(2);">Kraków</li>
		<li id="3" onClick="ustawWartosc(3);">Warszawa</li>
		<li id="4" onClick="ustawWartosc(4);">Parzymiechy Dolne</li>
	</ul>
</div>
 
<input type="hidden" id="wybrany" value="" />
[HTML] pobierz, plaintext 

pisane na szybko, dodaj zamykanie i wyświetlanie miasta które wybrałeś.

Ale dla mnie to bez sensu


Edit:

żeby nie przypadkowo nie zaznaczyć tekstu dorzuć do css:

[CSS] pobierz, plaintext 
div{
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
 
[CSS] pobierz, plaintext 

Kiedyś był do tego w css scrollbar-*-* ale usunięto.


Ewentualnie jeśli nie wprowadzi to zamieszania to zamiast <select/> daj <datalist/>.