antonydoyle
11/5/2013 - 10:02 AM

Style select menus and make them look 'awesome' using only css

Style select menus and make them look 'awesome' using only css

style-select.html
content_copyfile_download
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }
   
  .styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   border-radius: 6px;
   }
</style>
</head>

<body>
<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
	  <option>Guess what, a third option</option>
   </select>
</div></body>
</html>
notes
content_copyfile_download
Add -webkit-appearance: none; to enable height values in Chrome and Firefox

for Opera you will need .styled-select select {background-color: rgba(0,0,0,0);…}

Should work in proper browsers and IE8 +


You'll probably need razor to use his in the majority of the Contensis modules.