Страницы

Поиск по вопросам

пятница, 2 ноября 2018 г.

Сложный текст в placeholder

Можно ли с помощью только 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; }
Это грубый набросок, который надо допиливать до нужного состояния, но общий смысл такой.

Комментариев нет:

Отправить комментарий