[英]how to make the style of select option like this style?
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
.这里的标签选择由+
选择器.field .input:focus+.label
.field .input:active+.label
。 focus
and active
are two states for input. focus
和active
是输入的两种状态。 For more information about visit plus selector .有关访问plus 选择器的更多信息。field
to positon:relative
and made label
positon:absolute
.我们将field
设置为positon:relative
并制作label
positon:absolute
。 By seeting other cs for backgroubd-color
and top
, right
we can achieve it easily.通过查看backgroubd-color
和top
的其他 cs, right
可以轻松实现它。 .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.其次,如果你需要打开一个下拉菜单,那么你应该看看html中的<select>
标签,你可以在其中提供多个<option>
标签,用户可以从中选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.