I found on internet a custom select, made only with HTML and CSS.
* {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
border-color: inherit;
}
form {
width: 114px;
height: 100%;
padding-bottom: 75px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
ul {
list-style: none;
}
.select {
width: 225px;
height: 40px;
cursor: pointer;
background-color: white;
box-shadow: 0 2px 0 white;
border-radius: 2px;
}
.select_expand {
width: 0;
height: 40px;
position: absolute;
top: 0;
right: 0;
}
.select_expand::after {
content: '\003E';
position: absolute;
top: 50%;
right: 70px;
transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
color: black;
font-size: 10px;
pointer-events: none;
z-index: 2;
transition: all 250ms cubic-bezier(.4, .25, .3, 1);
}
.select_expand:hover::after {
opacity: 1;
}
.select_expand:checked::after {
transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
}
.select_expandLabel {
display: block;
width: 100%;
height: 40px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.select_close {
display: none
}
.select_closeLabel {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: none;
}
.select_items {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding-top: 40px;
}
.select_input {
display: none
}
.select_label {
transition: all 250ms cubic-bezier(.4, .25, .3, 1);
display: block;
height: 0;
font-size: 18px;
line-height: 40px;
overflow: hidden;
color: black;
background-color: #fff;
cursor: pointer;
padding-left: 15px;
}
.select_label-placeholder {
height: 40px;
vertical-align: middle;
position: absolute;
top: 0;
padding-left: 15px;
}
.select_expand:checked .select_closeLabel {
display: block;
box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1);
}
.select_expand:checked .select_closeLabel .select_options .select_label {
height: 40px;
}
.select_expand:checked .select_closeLabel .select_options .select_label:hover {
background-color: #f7f7f7
}
.select_expand:checked .select_closeLabel .select_options .select_expandLabel {
display: none
}
.select_input:checked .select_label {
height: 40px;
margin-top: -40px;
}<form>
<ul >
<li>
<input type="radio" name="awesomeness" id="awesomeness-close" value=""/>
<span >#</span>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-opener"/>
<label for="awesomeness-close"></label>
<ul >
<li >
<input type="radio" name="awesomeness" id="awesomeness-ridiculous"/>
<label for="awesomeness-ridiculous">@ ASD</label>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-reasonable"/>
<label for="awesomeness-reasonable">E* ERD</label>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-lacking"/>
<label for="awesomeness-lacking">@ TRF</label>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-awesomeless"/>
<label for="awesomeness-awesomeless">% QWE</label>
</li>
</ul>
<label for="awesomeness-opener"></label>
</li>
</ul>
</form>I tried to add a box shadow for the open dropdown menu and I did not succed.
Also I want the arrow to have a dynamic position: to be all the time on the right side and to not overlap with the selected option,as it is doing now, and I don't know how to achieve this one. Is this possible only with css?
I am planning to use this form in a reactjs component.
Here is the 
I want that the arrow to move automaticaly to the right of the selected option. I tried with float: right, but not any results.
Maybe it is better to use an image here: content: '\003E';?
CodePudding user response：
* {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
border-color: inherit;
}
form {
width: 114px;
height: 100%;
padding-bottom: 75px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
ul {
list-style: none;
}
.select {
width: 225px;
height: 40px;
cursor: pointer;
background-color: white;
box-shadow: 0 2px 0 white;
border-radius: 2px;
}
.select_expand {
width: 0;
height: 40px;
position: absolute;
top: 0;
right: 0;
}
.select_expand::after {
content: '\003E';
position: absolute;
top: 50%;
right: 25px;
transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
color: black;
font-size: 10px;
pointer-events: none;
z-index: 2;
transition: all 250ms cubic-bezier(.4, .25, .3, 1);
}
.select_expand:hover::after {
opacity: 1;
}
.select_expand:checked::after {
transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
}
.select_expandLabel {
display: block;
width: 100%;
height: 40px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.select_close {
display: none
}
.select_closeLabel {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: none;
}
.select_items {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding-top: 40px;
}
.select_input {
display: none;
}
.select_label {
transition: all 250ms cubic-bezier(.4, .25, .3, 1);
display: block;
height: 0;
font-size: 18px;
line-height: 40px;
overflow: hidden;
color: black;
background-color: #fff;
cursor: pointer;
padding-left: 15px;
}
.select_label-placeholder {
height: 40px;
vertical-align: middle;
position: absolute;
top: 0;
padding-left: 15px;
}
.select_expand:checked .select_closeLabel {
display: block;
}
.select_expand:checked .select_closeLabel .select_options .select_label:hover {
background-color: #f7f7f7;
}
.select_expand:checked .select_closeLabel .select_options .select_expandLabel {
display: none;
}
.select_input:checked .select_label {
height: 40px;
margin-top: -40px;/*changed*/
}
.select_expand:checked .select_closeLabel .select_options .select_label {
height: 40px;
/*box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1);*/
}
.select_options {
/*coment the below line and uncoment above for diffrent effect*/
box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1);
}<form>
<ul >
<li>
<input type="radio" name="awesomeness" id="awesomeness-close" value=""/>
<span >#</span>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-opener"/>
<label for="awesomeness-close"></label>
<ul >
<li >
<input type="radio" name="awesomeness" id="awesomeness-ridiculous"/>
<label for="awesomeness-ridiculous">@ ASD</label>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-reasonable"/>
<label for="awesomeness-reasonable">E* ERD</label>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-lacking"/>
<label for="awesomeness-lacking">@ TRF</label>
</li>
<li >
<input type="radio" name="awesomeness" id="awesomeness-awesomeless"/>
<label for="awesomeness-awesomeless">% QWE</label>
</li>
</ul>
<label for="awesomeness-opener"></label>
</li>
</ul>
</form>First things first,
and first thing is putting ;
Second,
to put box shadow
- add the code to
.select_options
Third,
to avoid overlap
- change
rightfrom 70px to 25px(reduce right means increase left)