Last active
October 20, 2021 10:22
-
-
Save alt-karate/a17d5984a5b8084baa680d324d542a28 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="select-wrap"> | |
<select name=""> | |
<option value="希望なし">ジャンル選択する</option> | |
<option value="ジャンルが入ります">ジャンルが入ります</option> | |
<option value="ジャンルが入ります">ジャンルが入ります</option> | |
<option value="ジャンルが入ります">ジャンルが入ります</option> | |
<option value="ジャンルが入ります">ジャンルが入ります</option> | |
<option value="ジャンルが入ります">ジャンルが入ります</option> | |
</select> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.select-wrap { | |
display: inline-block; | |
width: 27rem; | |
position: relative; | |
} | |
.select-wrap:before { | |
color: #7a7a7a; | |
z-index: 1; | |
position: absolute; | |
right: 15px; | |
top: -4px; | |
content: "\f0d7"; | |
font-weight: 900; | |
font-size: 3rem; | |
font-family: "Font Awesome 5 Free"; | |
pointer-events: none; | |
} | |
select { | |
outline: none; | |
-moz-appearance: none; | |
text-indent: 0.01px; | |
background: none transparent; | |
vertical-align: middle; | |
appearance: none; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
height: 40px; | |
padding: 6px 12px 10px 12px; | |
border: 1px solid #bfbfbf; | |
width: 27rem; | |
border-radius: 5px; | |
} | |
select::-ms-expand { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment