Where a magnifying glass and text input is a vertical bar, how to do it? enter image description here

  • Picture, pseudo-elements ... With the source code it would be clearer - slippyk
  • I do not add a picture, I added an icon through fontawesome - Litash
  • I think he meant on the left there is a block with a picture or your icon, it may have a border-right , and to the right it has input . But honestly I don’t know other ways to do it, so I’m interested :) - Telion

2 answers 2

If the author wants a vertical strip inside the input, then it can be either:

 input{ background:#f5f5f5; border: 1px solid #dcdcde; padding:0 0 0 65px; height:30px; } .input-separator{ width:1px; height:26px; display: block; border-left: 1px solid #dcdcde; position:absolute; left:30px; top:3px; } .input-block{ position:relative; } 
 <div class = "input-block"> <input type = 'text' placeholder = 'Enter you keyword...'/> <div class="input-separator"></div> </div>

  • Only question. Why do we indent for a strip on top of 3 px? According to the logic of things, the height of the parent is 30px, subtract -26px, we get 4 pixels available. From above 2 and below 2 (given the border of the parent there will be just 1 px indent), there should be top:2px , but this way is pressed to the top and I don’t understand why. - Telion
  • The parent in this case is input-block, its height is 32px (30px - input + 2px - border) - Mikl
  • And, height is changed by a frame. Okay, thanks, I blunted something ... - Telion

 form, .form-row { position: relative; } /* Иконка поиска */ label { width: 50px; position: absolute; top: 5px; left: 0px; bottom: 5px; line-height: 40px; text-align: center; color: #9a9a9a; border-right: 1px solid #afafaf; } /* Дополнительные стили для наглядности: */ form { padding-right: 100px; } /* Кнопка поиск */ input[type="submit"]{ background: #269dc7; color: #fff; border:none; height: 50px; width: 100px; font-weight: bold; position: absolute; top: 0; right: 0; cursor: pointer; } /* Поле поиска */ input[type="search"]{ height: 50px; background: #f8f8f8; border: 1px solid #afafaf; border-right: none; color: #9a9a9a; width: 100%; padding-left: 60px; } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <form> <div class="form-row"> <label for="s"><i class="fa fa-search" aria-hidden="true"></i></label><input type="search" name="s" id="s" placeholder="Enter ..."> </div> <input type="submit" value="search"> </form>