Is it possible using only css / html to impose the following placeholder :

complex placeholder

I mean the text inside the placeholder , part of which is in one style, part in the other, including the dotted underscore

 .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; } 
 <div class="search"> <input class="search-input" type="search" placeholder="Например: Артикул a2343-JFKLFLI3920ee"> <input class="search-btn" type="button"> </div>

  • Do you mean a mask for the input field? - And Rey
  • Yes, I mean the text - kizoso
  • You can try to give the parent element :before\:after and place the text there. - YozhEzhi
  • Yes, I thought about it, but on hover, active and focus - ok - this text can be removed, it should disappear if the field is filled, and if the field is not in focus, how to remove befofe / after on the filled field during defocusing? - kizoso
  • one
    Something like this: codepen.io/alexeyten/pen/ryKzVY - Alexey Ten

3 answers 3

It is possible so:

 .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; } 
 <label class="input"> <input required> <span class="placeholder" data-before="Пример: " data-after="BFG-9000"></span> </label>

This is a rough sketch that needs to be finished to the desired state, but the general meaning is as follows.

  • Something I am too smart. It was possible to write and arrange anything right on the span ... - Alexey Ten

What if such an option, make a placeholder using this element (though you need a bit of code):

The trick is to use <label .. for="search"> so that a click on it is passed to 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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search"> <input class="search-input" type="search" id="search"> <label class=placeholder for="search">Например: <span>Артикул a2343-JFKLFLI3920ee</span></label> <input class="search-btn" type="button"> </div>

  • Good working solution, but still I would like to do without js - kizoso

If without js , without 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; } 
 <div class="search"> <label> <input class="search-input" type="search" required="required"> <span>Например:<i>Артикул a2343-JFKLFLI3920ee</i></span> </label> <input class="search-btn" type="button"> </div>