Html Select option Styling | OWNGEEK-VIVEK MADATHIL

Html Select option Styling

June 03, 2016

HTML MarkUp:

	<select>
	<option class="font1" value="volvo">Volvo</option>
	<option class="font2" value="saab">Saab</option>
	<option class="font3" value="opel">Opel</option>
	<option class="font4" value="audi">Audi</option>
	</select>

view raw select_option_styling.html hosted with ❤ by GitHub

StyleSheet (CSS):

	.font1{ font-style:italic;}
	.font2{color:red;}
	.font3{ font-weight:600;}
	.font4{ background-color:#0CC}

view raw select_option_styling.html hosted with ❤ by GitHub

Underline doesnot work in native controls like select . In this case we can use jquery , they hide select element and show a look a like usually they are either <ul>/<li>,<span> or <div>. Through css we can change the style.

Links:
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" />

HTML MarkUp:

	<select>
	<option>select</option>
	<option>one</option>
	<option>two</option>
	<option>three</option>

	</select>

view raw select_option_underline.html hosted with ❤ by GitHub

StyleSheet (CSS):

	li, span {text-decoration: underline; }
	.ui-selectmenu-button { width:150px !important; }

view raw select_option_underline_styling.html hosted with ❤ by GitHub

Javascript:

	<script>
	$(document).ready(function(){
	$('select').selectmenu();
	})
	</script>

view raw select_option_underline_javascript.html hosted with ❤ by GitHub

vivek madathil

No comments :

Post a Comment