1. It is necessary to stylize select , I removed the arrow, I set the linear vertical background , I cannot make the arrow ... select nested form ...

2. It is necessary to synchronize several select each other, and so, there is a 4-piece select , the first select normal, the other 3 are disabled , when you click on the first select second option - the second select is not disabled , all others except the first and second select remain disabled , when you click on the first select third option - the third select becomes not disabled , all others except the first and third select remain disabled , just with the last select ...

 select { display: block; width: 200px; cursor: pointer; padding-left: 9px; position: relative; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background-image: -moz-linear-gradient(top, #F4F3F1 0%, #fff 100%); background-image: -webkit-linear-gradient(top, #F4F3F1 0%, #fff 100%); background-image: -ms-linear-gradient(top, #F4F3F1 0%, #fff 100%) } 
 <form action=""> <select class="select"> <option selected class="region">Region</option> <option class="category">Category</option> <option disabled>ds</option> <option class="date">Date</option> <option class="prise">Price</option> </select> <select class="select border-radius" disabled id="catefory"> <option selected>Category</option> <option>3</option> <option>3463</option> <option>64</option> </select> <select class="select border-radius" disabled id="date"> <option selected>Date</option> <option>34</option> <option>43</option> <option>46</option> </select> <select class="select border-radius" disabled id="prise"> <option selected>Price</option> <option>6</option> <option>346</option> <option>3446</option> </select> </form>

  • one
    Show the code you already have - ThisMan
  • html and sss? or just html? - Ivan
  • @Ivan copy all the codes here as text - perfect
  • Accept edit, added snippet to your question. - br3t
  • thank you very much) - Ivan

1 answer 1

The synchronization code is like this:

 $("#main-select").change(function() { var activeSelect = $(this).find("option:selected").attr("class"); $(".select:not(#main-select)").attr("disabled","disabled"); $("#" + activeSelect).removeAttr("disabled"); }); 
 select { display: block; width: 200px; cursor: pointer; padding-left: 9px; position: relative; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background-image: -moz-linear-gradient(top, #F4F3F1 0%, #fff 100%); background-image: -webkit-linear-gradient(top, #F4F3F1 0%, #fff 100%); background-image: -ms-linear-gradient(top, #F4F3F1 0%, #fff 100%) } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action=""> <select class="select" id="main-select"> <option selected class="region">Region</option> <option class="category">Category</option> <option disabled>ds</option> <option class="date">Date</option> <option class="price">Price</option> </select> <select class="select border-radius" disabled id="category"> <option selected>Category</option> <option>3</option> <option>3463</option> <option>64</option> </select> <select class="select border-radius" disabled id="date"> <option selected>Date</option> <option>34</option> <option>43</option> <option>46</option> </select> <select class="select border-radius" disabled id="price"> <option selected>Price</option> <option>6</option> <option>346</option> <option>3446</option> </select> </form>

  • synchronization everything is fine ATP) left, do the arrow) - Ivan
  • background: url (../ img / arrow.png) no-repeat 99%, url (../ img / select-bg.jpg) repeat-x; - Ivan
  • the first picture of the arrow itself, the second background of the entire selector, the required height and width of 1 pixel to take up less space)) - Ivan