owngeek

<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>

owngeek

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

owngeek

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

</select>

owngeek

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

owngeek

<div class="box"></div>

owngeek

.box{ width:300px; height:300px; background-color:#30F; -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
.box:hover{  background-color: #ff007c;
    background-color: rgba(255,0,124,0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(9,157,179,0.6)), to(transparent));
    background-image: -webkit-linear-gradient(top, rgba(9,157,179,0.6), transparent);
    background-image: -moz-linear-gradient(top, rgba(9,157,179,0.6), transparent);
    background-image: -o-linear-gradient(top, rgba(9,157,179,0.6), transparent);
    background-image: linear-gradient(to bottom, rgba(9,157,179,0.6),transparent);

owngeek

<style>
#collapse * {
    display:block;
    list-style:none;
    cursor:pointer;
    text-transform:uppercase;
}
#collapse ul li {
}
.open{}

owngeek

<style>
.title{ width:100%; float:left; color:#fbfbfb; font-size:16px; margin-left:25px; font-family:"Arial Black", Gadget, sans-serif}
/*-----Both Horizontally and Vertically--------*/
.wrpr{background-color: #999999; position:relative; height:500px; width:500px; float:left;}
.centre{ width:200px; height:200px; background-color:#C30; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
/*-----Both Horizontally and Vertically--------*/


/*-----one element in horizontaly centre --------*/
.wrpr2{background-color: #999900;  height:500px; width:500px; margin:0; float:left; }

owngeek

<style>
.rollover figure {
  position: relative;
  overflow: hidden;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rollover figure figcaption {

owngeek

<style>
div {
	width: 100px;
	height: 100px;
	background-color: #990;
	position: absolute;
	left: 0;
	-webkit-animation-name: example; /* Chrome, Safari, Opera */
	-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
	animation-name: example;