<div class="input">
    <input type="text" value="Имя..." />
</div>

.input input {
    font-size:20px;
    border:none;
    outline:none;
    background: transparent;
}
.input {
    border:none;
    display:inline-block;
    border-bottom:solid #333 2px;
}
.input:before, .input:after {
    content:" ";
    display: inline-block;
    vertical-align:bottom;
    height: 5px;
    width: 2px;
    background: #333;
}

var bar = $('.bar-text');
            
bar.mouseenter(function() {
    $(this).css('background-color', 'black');
  })
  .mouseleave(function() {
    $(this).css('background-color', 'transparent');
  });