Is it possible to remove a bottom border on input textfield, under the new char?
I just received this visual design:
CLG is a label tag, while the line is an input type=tel Just ignore the purple overlay...
The designer asks me to remove the border as the user types a new number.
Is that possible?
It is definitely possible, however it includes
The idea is basically to mimick the border with a :after pseudo-element and shrink it to the remaining width of the <label> .
// 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> Instead of input element, I used a div element with 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 Fiddle
当然，（几乎）一切皆有可能。
$(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>