有需求要实现这样input输入框,所以就开始自己写一个,样式和代码如下:
.form_block {
position: relative;
text-align: left;
}
.form_con {
display: block;
position: relative;
border: 1px solid #BBBBBB;
border-radius: 2px;
min-height: 56px;
color: #000;
font-size: 16px;
}
.form_con_on {
border: 1px solid #ca4936;
}
.form_name {
display: block;
width: calc(100% - (16px * 2));
position: absolute;
left: 16px;
top: 5px;
cursor: text;
font-size: 75%;
opacity: 1;
transition: all .2s;
color: rgba(22, 21, 19, .6);
box-sizing: border-box;
/* font-size: 16px;
top: 15px; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form_name_not {
font-size: 14px;
top: 50%;
transform: translateY(-50%);
white-space: initial;