Можно ли с помощью только css/html сверстать такой placeholder
Я имею ввиду текст внутри placeholder, часть которого в одном начертании, часть в другом и в том числе пунктирное подчеркивание
.search{
position:relative;
margin:26px 0 2px;
}
.search-input{
border: 1px solid #d8d8d8;
display: block;
width: 100%;
height: 52px;
font-size: 14px;
padding: 12px 57px 12px 20px;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
border-radius: 52px;
}
.search-btn{
position:absolute;
top:0;
right:0;
bottom:0;
background:url("https://i.stack.imgur.com/9vArC.png") no-repeat center center;
width:54px;
padding:0;
border:none;
}
Ответ
Можно так:
.input {
position: relative;
display: inline-block;
border: 1px solid #ccc;
border-radius: 10px;
padding: 5px 10px;
cursor: text;
}
.input input {
border: none;
box-shadow: none;
}
.placeholder {
position: absolute;
display: none;
left: 10px;
top: 8px;
color: #666;
font-size: smaller;
}
.placeholder::before {
content: attr(data-before);
}
.placeholder::after {
content: attr(data-after);
font-style: italic;
border-bottom: 1px dotted;
}
input:invalid + .placeholder {
display: block;
}
input:focus + .placeholder {
display: none;
}
Это грубый набросок, который надо допиливать до нужного состояния, но общий смысл такой.
Комментариев нет:
Отправить комментарий