There is such a drop-down list.

select { width: 180px; padding: 3px 5px; height: 25px; line-height: 25px; background: transparent; border: none; cursor: pointer; } div { width: 150px; height: 25px; overflow: hidden; background-color: #ebebeb; background-image: url(http://cdn.joxi.ru/media/cache/preview/uploads/prod/2014/05/13/f8e/b5f/e82b8e0d4ed7fe4b8eaef79b94cff9022da760a7.jpg) no-repeat right center; background: url(http://cdn.joxi.ru/media/cache/preview/uploads/prod/2014/05/13/f8e/b5f/e82b8e0d4ed7fe4b8eaef79b94cff9022da760a7.jpg) no-repeat right center, -webkit-linear-gradient(bottom, #dbdbdb, #fafafa); background: url(http://cdn.joxi.ru/media/cache/preview/uploads/prod/2014/05/13/f8e/b5f/e82b8e0d4ed7fe4b8eaef79b94cff9022da760a7.jpg) no-repeat right center, -moz-linear-gradient(bottom, #dbdbdb, #fafafa); background: url(http://cdn.joxi.ru/media/cache/preview/uploads/prod/2014/05/13/f8e/b5f/e82b8e0d4ed7fe4b8eaef79b94cff9022da760a7.jpg) no-repeat right center, -ms-linear-gradient(bottom, #dbdbdb, #fafafa); background: url(http://cdn.joxi.ru/media/cache/preview/uploads/prod/2014/05/13/f8e/b5f/e82b8e0d4ed7fe4b8eaef79b94cff9022da760a7.jpg) no-repeat right center, -o-linear-gradient(bottom, #dbdbdb, #fafafa); background: url(http://cdn.joxi.ru/media/cache/preview/uploads/prod/2014/05/13/f8e/b5f/e82b8e0d4ed7fe4b8eaef79b94cff9022da760a7.jpg) no-repeat right center, linear-gradient(bottom, #dbdbdb, #fafafa); border: 1px solid #797a7c; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } 
 <div> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div>

Jsfiddle example

Questions:

  1. How to make the width of options equal to the width of the stylized select?
  2. How to remove a stroke around all options?

I would like to solve these issues on pure CSS , or with minimal implementation of JavaScript (jQuery) .

  • Unfortunately, CSS does not lend itself) Under the link article, there is just about this and a solution to the problem. dimox.name/styling-select-boxes-using-jquery-css Using jquery plugins allowed? - iterq
  • In general, of course, it is desirable to solve all this without third-party plug-ins. In fact, only these 2 problems arise, there will be no problems with styling each individual option. - andreyqin

2 answers 2

Here is an example: http://jsfiddle.net/8vFLy/3/

 $("#current_option").click(function(){ customOptionsBlock = $("#custom_options"); if (customOptionsBlock.is(":hidden")) { $("#custom_options").show(); } else { $("#custom_options").hide(); } }); $("#custom_options li").click(function(){ choosenValue = $(this).attr("data-value"); $("select").val(choosenValue).prop("selected", true); $("#current_option span").text($(this).text()); $("#current_option").attr("data-value", choosenValue); }); 
 #custom_select { width: 100px; text-align: center; } #current_option { width: 100%; background: #d2d2d2; border: 1px solid grey; line-height: 25px; cursor: pointer; border-radius: 4px; } #current_option:hover { background: #EBEBEB; } #current_option b{ height: 100%; width: 20px; float: right; border-left: 1px solid grey; } #current_option b img{ width: 10px; height: 10px; margin-top: 5px; } #custom_options { display: none; width: 100%; padding: 0; margin-top: -2px; background: #EBEBEB; border: 1px solid grey; border-radius: 0 0 4px 4px; } #custom_options li { list-style: none; padding: 0; width: 100%; height: 25px; text-align: center; } #custom_options li:last-child { border-radius: 0 0 4px 4px; } #custom_options li:first-child { margin-top: 4px; } #custom_options li:hover{ background: #d2d2d2; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <select> <option value="">--------</option> <option value="1">Opt1</option> <option value="2">Opt2</option> <option value="3">Opt3</option> </select> <div id="custom_select"> <div id="current_option" data-value=""> <span>------------</span> <b><img src="http://support.eye.fi/wp-content/uploads/2007/09/arrow-down.png.pagespeed.ce.sb6_oS5SGc.png"/></b> </div> <ul id="custom_options"> <li data-value="">----------</li> <li data-value="1">Opt1</li> <li data-value="2">Opt2</li> <li data-value="3">Opt3</li> </ul> </div>

There is a real select and fully synchronized with it. In the role of the value attribute is a custom data-value.

  • I got the idea. Suppose I create my own select. To transfer the necessary data to the server, I need to create a normal select with the same values, hide it and synchronize with my own? - andreyqin
  • Well, depending on how the data is transmitted, if this ajax request and data is collected manually, then you can not create a regular one, and if this is a classic form, with the submit button, then, of course, it’s convenient to synchronize and send data from the form, as always . - iterq
  • jsfiddle.net/8vFLy/5 with jQuery 1.10.1 did not work in opera. From 2.1.0 - everything is ok. - iterq
  • How to make it so that when you click outside our pseudoselekt area, it closes? - andreyqin
  • Rewrote your code - jsfiddle.net/8vFLy/6 Works starting from version 1.7.2 - andreyqin

Completed to work in the opposite direction. For example, for cases when this select is loaded with a value.

 $("#current_option").click(function() { customOptionsBlock = $("#custom_options"); if (customOptionsBlock.is(":hidden")) { $("#custom_options").show(); } else { $("#custom_options").hide(); } }); $("#custom_options li").click(function() { choosenValue = $(this).attr("data-value"); $("select").val(choosenValue).prop("selected", true); $("#current_option span").text($(this).text()); $("#current_option").attr("data-value", choosenValue); }); $('select').change(function() { $('#current_option').attr("data-value", $(this).val()); $("#current_option span").text($('select :selected').text()); }); 
 #custom_select { width: 100px; text-align: center; } #current_option { width: 100%; background: #d2d2d2; border: 1px solid grey; line-height: 25px; cursor: pointer; border-radius: 4px; } #current_option:hover { background: #EBEBEB; } #current_option b { height: 100%; width: 20px; float: right; border-left: 1px solid grey; } #current_option b img { width: 10px; height: 10px; margin-top: 5px; } #custom_options { display: none; width: 100%; padding: 0; margin-top: -2px; background: #EBEBEB; border: 1px solid grey; border-radius: 0 0 4px 4px; } #custom_options li { list-style: none; padding: 0; width: 100%; height: 25px; text-align: center; } #custom_options li:last-child { border-radius: 0 0 4px 4px; } #custom_options li:first-child { margin-top: 4px; } #custom_options li:hover { background: #d2d2d2; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <select> <option value="">--------</option> <option value="1">Opt1</option> <option value="2">Opt2</option> <option value="3">Opt3</option> </select> <div id="custom_select"> <div id="current_option" data-value=""> <span>------------</span> <b><img src="http://support.eye.fi/wp-content/uploads/2007/09/arrow-down.png.pagespeed.ce.sb6_oS5SGc.png"/></b> </div> <ul id="custom_options"> <li data-value="">----------</li> <li data-value="1">Opt1</li> <li data-value="2">Opt2</li> <li data-value="3">Opt3</li> </ul> </div>