How to zastilizirovat dropdown list?

Question

There is a drop down list with checkboxes. Help to correct the style so that the width of the .box remains the same, and the width of the list elements is stretched across the contents, as in a regular select

Here is my code

And I wanted the drawing speed to be the same as in the normal select: the problem is that when the page loads, the entire list is displayed at once, and when it is loaded, the guide is immediately applied to the list and everything becomes normal. How to fix?

if the problem is only that everything is displayed at once, and then it is hidden, try doing the opposite - hide the container with css or even inline style='display: none;'
And how to solve the problem with the fact that the content does not fit in size and is transferred to another line?
With the size of a 140px block, I want the content to show the entire width depending on the number of characters

Accepted Answer · 2015-07-26T17:51:36

You need to pull the UL out of the div.box context. To do this, we write him position: absolute; , and the parent div.box must have position: relative; , then they will be positioned relative to each other and not relative to the page.

 .box { width: 140px; margin: 15px auto 0; background: #fff; border: 1px solid #C8B5A1; cursor: default; position: relative; font-size: 13px; } .expand { background: url(http://s018.radikal.ru/i505/1507/d8/163953153543.png) no-repeat left; height: 10px; width: 10px; margin: 3px 0; float: right; cursor:default } .open { margin: 0 3px; padding: 1px; } ul { position: absolute; margin: 0 -1px -1px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 1px solid rgb(200, 181, 161); overflow: hidden; padding: 7px 0px; } ul li { white-space: nowrap; font-size: 13px; color: #374747; padding: 3px; }

 <div class="box"> <div class="open">Цена<span class="expand"></span></div> <ul> <li> <input type="checkbox" id="prices_1000"/> <label for="prices_1000">до 1000 руб.</label> </li> <li> <input type="checkbox" id="prices_2000" /> <label for="prices_2000">от 1000 до 2000 руб..................</label> </li> <li> <input type="checkbox" id="prices_3000" /> <label for="prices_3000">от 2000 до 3000 руб.</label> </li> </ul> </div>

And how can we make it so that when clicking outside the list it hides through javascript, and when clicking inside everything is normal?
and why imitate select behavior when you can just standardize them?
you need to look in place what is around this select (most likely it’s some kind of <div> ), and use jquery to catch the click event on this element.
Another question: how to select a line when the desired checkbox is selected?

Nick Volynkin ♦ 24.6k 14 94 175 · Answer 2 · 2015-07-26T18:43:51

Hello! I suggest adding a few more styles to your class .box.

 .box { min-width: 140px; float:left; margin-left: 30%; margin: 15px auto; background: #fff; border: 1px solid #C8B5A1; cursor: default; position: relative; font-size: 13px; }

min-width: 140px; float and margin - for positioning - here you’ll see how much you need by layout.

Looks like that:

Just when the drop-down list is wider than the field "Price" itself - hits the eyes. But if it is necessary for the design - then: Either you need to reduce the font) or cut the text :) or reduce the indentation.

It remains to make it so that when clicking outside the list, it hides, and when it clicks inside, everything is fine
@PoGiS: about the “lower” example: the answers here often change places, because they get votes for and against.

How to zastilizirovat dropdown list?

2 answers 2

More articles: