Is it possible to remove the lower border on the input text box, according to the new char?

Question

I just got this visual design:

The CLG is the label tag, and the line is input type=tel Just ignore the purple overlay ...

The designer asks me to remove the border as the user enters a new number.

Is it possible?

Answer 1

This is definitely possible, but it does include

• JavaScript (to check the current input size)
• Flexbox (for automatic border shrinkage)

The idea is to map the border to the :after pseudo-element and squeeze it to the remaining <label> width.

 // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ [].forEach.call(document.querySelectorAll('input'), function(element) { element.addEventListener('input', function() { element.size = element.value.length; }); }); 

 label { display: flex; align-items: stretch; font-weight: bold; } label:after { content: ''; display: block; width: 100%; border-bottom: 1px solid gray; } input { display: block; border: none; } 

 <form> <label>CLG <input type="tel" size="1"></label> </form> 

Answer 2

Instead of an input element, I used a div element with the contenteditable property.

 .wrapper { border-bottom: 1px solid black; width: 250px; height: 25px; white-space: nowrap; } .wrapper > div { display:inline-block; vertical-align: middle; height: 100%; } .text { position: relative; min-width:10px; } .text:after { content:""; border-top: 1px solid white; border-bottom: 1px solid white; top: -1px; bottom: -1px; left: 0px; width: 100%; position: absolute; } .text:focus { outline: none; } 

Working script

Answer 3

Of course, (almost) anything is possible.

 $(function() { $('span').html($('input').val()); /* on page load */ $('input').on('keyup', function() { /* on keyup */ $(this).next('span').html($(this).val()); }); }); 

 input { border: 0; border-bottom: 5px solid red; } label { position: relative; } span { position: absolute; left: 31px; top: 19px; height: 5px; overflow: hidden; color: white; background: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> CLG <input type="text" value="0123" /> <span></span> </label> 

The label functions as a wrapper element (positioned relatively). Thus, the range can be set as absolute, and its position relative to the mark. The span has a height, the same as the lower border and white.

When loading a page or changing the value of inputs. HTML also changes within the range. Laying border.

Note that the font size inside the input and range must be exactly the same.

In addition, the starting point of the range refers to the label, not the input (since there is no end tag at the input, you cannot apply it to this). Therefore, by changing the CLG text or its font, you will also need to change the starting point of the range.

Answer 4

it should work

 $.fn.setCursorPosition = function(pos) { this.each(function(index, elem) { if (elem.setSelectionRange) { elem.setSelectionRange(pos, pos); } else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }); return this; }; $("document").ready(function() { var maxlen = $("#txtVal").attr("maxlength"); var underscore = ''; for (var i = 0; i < maxlen - 1; i++) { underscore = underscore + '_'; } $("#txtVal").val(underscore); $("#txtVal").click(function() { var inputText = $("#txtVal").val(); var inputValue = inputText.replace(/_/g, ""); $("#txtVal").focus().setCursorPosition(inputValue.length); }); $("#txtVal").keyup(function() { var inputText = $("#txtVal").val(); var inputValue = inputText.replace(/_/g, ""); var underscores = ''; for (var i = 0; i < (maxlen - inputValue.length) - 1; i++) { underscores = underscores + '_'; } $("#txtVal").val(inputValue + underscores); $("#txtVal").focus().setCursorPosition(inputValue.length); }); $("#txtVal").blur(function() { var len = $("#txtVal").val().length; $("#txtVal").attr("maxlength", parseInt(len) + 1); }); }); 

 #txtVal { border: none; outline: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> CGL : <input type="tel" id="txtVal" maxlength="30" /> 

thanks