Customize select on pure css
One evening I was killing time, reading articles on the Internet, and came across this cybola user’s site where it’s written how to customize select on pure css. In the process of viewing this solution, I found several very inconvenient moments that I tried to correct in my solution of this task. So let's get started.
While watching the code of that post, I noticed that the author made a select that could not be closed when clicking outside it, as well as the impossibility to open the select by clicking on the name of the element if it was already selected.
In my version of customization, I, like the previous author, used the label, input [type = "radio"] and the power of css selectors. Since the css itself is completely unrealistic to customize with css, I imitated the behavior of the select.
For starters, I just added this markup:
')
When viewing this code, you might have a question: “Why does all the input have the same name?”. I will answer right away: this is done so that our select behaves adequately (opened and closed when necessary). But first things first. Let's move on to the most interesting, in my opinion, part - css.
Here it is - the most interesting part, in which it is necessary to comprehend how to change the choice of input (all inputs with the type of radio have the same name => we can choose only one of them) affects our select. Another feature of this option is the ability to disable the select using the disabled attribute on #select.
You can find a ready-made example here .
That's all. A couple of minuses of the previous author are fixed, so this solution, I believe, at the moment can be considered an ideal css-variant of the select. I hope my decision will come in handy.
While watching the code of that post, I noticed that the author made a select that could not be closed when clicking outside it, as well as the impossibility to open the select by clicking on the name of the element if it was already selected.
In my version of customization, I, like the previous author, used the label, input [type = "radio"] and the power of css selectors. Since the css itself is completely unrealistic to customize with css, I imitated the behavior of the select.
For starters, I just added this markup:
')
Show html code
<!-- , --> <label for="select" class="select"> <!-- . --> <input type="radio" name="list" value="not_changed" id="bg" checked /> <!-- "" --> <input type="radio" name="list" value="not_changed" id="select"> <!-- , --> <label class="bg" for="bg"></label> <!-- - , #text - , , --> <div class="items"> <!-- , --> <input type="radio" name="list" value="first_value" id="list[0]"> <!-- --> <label for="list[0]">First option</label> <!-- , [1] --> <input type="radio" name="list" value="second_value" id="list[1]"> <!-- , [1] --> <label for="list[1]">Second loooooong option</label> <!-- . , --> <span id="text">Select something...</span> </div> </label> When viewing this code, you might have a question: “Why does all the input have the same name?”. I will answer right away: this is done so that our select behaves adequately (opened and closed when necessary). But first things first. Let's move on to the most interesting, in my opinion, part - css.
Show css code
/* , */ input { display: none; } /* ( .items) */ #text { position: absolute; display: block; top: 0; padding-left: 10px; } /* - , line-height( ; 4px, .. border 2px ) */ .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } /* , , */ .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } /* , , */ .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } /* - , , , */ .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } /* */ #select:disabled ~ .items #text { background: #eee; } /* . min-height , overflow (. ) */ .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } /* , 30px( , ) */ #select:not(:checked) ~ .items { height: 30px; } /* ( ) */ .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } /* - */ .items label:hover { background: #eee; cursor: pointer; } /* - */ #select:checked ~ .items { padding-top: 30px; } /* , */ #select:checked ~ .items label { display: block; } /* - , ( ) */ .items input:checked + label { display: block!important; border: none; background: white; } /* , , . background */ #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); } Here it is - the most interesting part, in which it is necessary to comprehend how to change the choice of input (all inputs with the type of radio have the same name => we can choose only one of them) affects our select. Another feature of this option is the ability to disable the select using the disabled attribute on #select.
You can find a ready-made example here .
That's all. A couple of minuses of the previous author are fixed, so this solution, I believe, at the moment can be considered an ideal css-variant of the select. I hope my decision will come in handy.
Source: https://habr.com/ru/post/442888/
All Articles