hello i have this photo : enter image description here
i want to make a select option with the same style
<div class="name">
<input class="input1"type="name" required>
<label class="label1">First name</label>
</div>
.label1{
position: relative;
color: #555;
font-size: 15px;
pointer-events: none;
right: 15px;
top: -28px;
transition: .2s all;
}
.input1:focus ~.label1,
.input1:valid ~ .label1{
top: -49px;
right: 9px;
background: #fff;
padding: 0 5px;
font-size: 10px;
color: #1f52f9;
}
.input1{
outline: none;
border: 1px solid #9c9c9c;
border-radius: 5px;
padding: 0 10px;
height: 35px;
font-size: 15px;
}
.input1:focus{
border: 1.5px solid #1f52f9;
}
.input1[type="name"]{
display: block;
margin: 30px 0 0 10px;
}
.input1[type="username"]{
display: block;
width: 390px;
margin: 10px 0 0 10px;
}
.input1[type="submit"]{
background: #4971f6;
color: #fff;
border: none;
padding:10px 30px;
border-radius: 5px;
margin: 40px 0 30px 180px;
cursor: pointer;
font-size: 15px;
}
.input1[type="submit"]:hover{
background: #254fdb;
}
so i want to make with the same style which mean when i press inside the select (the placeholder moving to the border and then opens the options)
+ selector,.field .input:focus+.label .field .input:active+.label. focus and active are two states for input. For more information about visit plus selector.field to positon:relative and made label positon:absolute. By seeting other cs for backgroubd-color and top, right we can achieve it easily..field {
position: relative;
display: inline-block;
margin: 10px 0;
}
.field .input {
line-height: 20px;
background: transparent;
position: relative;
text-align: right;
border-radius: 4px;
}
.field .input:focus,
.input:active {
border-color: blue;
outline: blue;
line-height: 28px;
}
.field .label {
position: absolute;
right: 2px;
z-index: -1;
}
.field .input:focus+.label,
.field .input:active+.label {
z-index: 1;
background-color: white;
color: blue;
top: -8px;
padding: 0 4px;
}<div class="field">
<input class="input" type="name" required>
<label class="label">First name</label>
</div>Firstly, there are a ton of libraries which you can choose from, that provide such ready-to-use components/elements. Secondly, if you need to open a dropdown, then you should have a look at <select> tag in html, in which you can provide multiple <option> tags, which a user can choose from.