如何使选择选项的样式像这个样式?

Question

你好，我有这张照片输入图片描述

我想创建一个样式相同的选择选项

<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;
}

所以我想用相同的样式这意味着当我按下内部选择(占位符移动到边界，然后打开选项)

Answer 1

• 我对类名做了一些更改，只是为了使这个答案一般
• 这里标签的选择由+选择器、.field .input:focus+.label选择器、.field .input:active+.label选择器完成。focus和active是两种输入状态。有关访问plus选择器的更多信息。
• 我们设置field为positon:relative,label为positon:absolute。通过查看backgroubd-color和top,right的其他cs，我们可以轻松实现它。

.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>

Answer 2

首先，有大量的库可供您选择，它们提供了这些现成的组件/元素。其次，如果你需要打开一个下拉菜单，那么你应该看看html中的<select>标签，你可以在其中提供多个<option>标签，用户可以从中选择。