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

#html #css #вёрстка #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;
}

  
  




    

Ответы

Ответ 1

Можно так:



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

  
  





Это грубый набросок, который надо допиливать до нужного состояния, но общий смысл такой.


Ответ 2

Что если такой вариант, сделать placeholder с помощью настоящего элемента (правда
понадобится немного кода):

Фишка еще в том, чтобы использовать  чтобы клик по нему передавался
в input



$('#search').keyup(function(){
   if($(this).val().length>0){
       $('.search .placeholder').hide();
   }else{
       $('.search .placeholder').show();
   }

})
.placeholder{
   position:absolute;
   top:18px;
   color:#ccc;
   left:22px;
}
.placeholder > span{
   text-decoration:underline;
}

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


  
  Например: Артикул a2343-JFKLFLI3920ee
  



Ответ 3

Если без js, без after\ before:



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

label {
  position: relative;
  display: block;
}

input+span {
  position: absolute;
  display: block;
  font-size: 14px;
  left: 20px;
  right: 60px;
  top: 20px;
  color: #d8d8d8;
  opacity: 1;
}


input:focus+span{
  display: none;
} 


input[required="required"]:valid +span {
  display: none;
}

  
    
    Например:Артикул a2343-JFKLFLI3920ee