Wysokość progu wejściowego

Question

Potrzebuję pomocy w zmianie wysokości kija - bez zmiany wyglądu (hacki/sztuczki dozwolone pod warunkiem, że działają).
Mam na myśli to, że nie chcę zmieniać rozmiaru czcionki (wysokość i szerokość), marginesów, wypustek, koloru, tła, obramowania, itp., A jeśli zmienię to, aby uzyskać styl kroju, uczyń to możliwym, więc można go przywrócić jak normalne wejście, z jego możliwościami stylizacji.

Moja najlepsza próba był następujący kod:

body{ 
 
    background-color: lightBlue; 
 
} 
 
#background{ 
 
    color: red; 
 
    height: 61px; 
 
    margin-top: 0px; 
 
    text-shadow: 0 0 0 transparent; 
 
    width: 173px; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-transform: scale(1,calc(1/3)); 
 
} 
 
#text{ 
 
    background-color: transparent; 
 
    border-color: transparent; 
 
    color: red; 
 
    left: 8px; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    top: 103px; 
 
}

<span>Caret's height (pixels):</span> 
 
<br> 
 
<br> 
 
<input placeholder="15 (default)" spellcheck="false"> 
 
<br> 
 
<br> 
 
<input id="background" oninput="document.getElementById('text').value=this.value" spellcheck="false"> 
 
<input id="text" placeholder="5 (1/3)" onfocus="this.blur()" spellcheck="false" tabindex="-1">

ignorowanie tekstu za wybór tajemniczości, jeśli trzeba. Na razie nie dbam o to.

Jeśli masz o wiele lepsze rozwiązanie, daj mi znać. To tylko niektóre z testów, które robię, nie potrzebuję dokładnie koloru czerwonego, a inne cechy są takie, jakie są, ale chcę, aby nadal można było je zmienić, kiedy tylko chcę.

Oto jak to wygląda dla mnie w przypadku osób nie dostać ten sam (przy użyciu Chrome):

Answer 1

Można to zrobić poprzez „hacków”.

Zamiast polu tekstowym, to trzeba kombinacji JavaScript, CSS i rozpiętość w ...

source: codepen

source: blog

source: jsfiddle

document.documentElement.setAttribute("class", "js"); 
 

 
var searchFauxInput = document.querySelector(".fb-Search_FauxInput"); 
 
var searchBox = document.getElementById("Input"); 
 

 
searchBox.addEventListener("keyup", function copyInput(event) { 
 
     searchFauxInput.textContent = searchBox.value; 
 
     searchBox.setAttribute("value", searchBox.value); 
 
}, false);

* { 
 
box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: #555; 
 
    font-family: sans-serif; 
 
} 
 

 
.fb-Search { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    height: 44px; 
 
    padding: 5px 70px 5px 5px; 
 
    width: 400px; 
 
    position: relative; 
 
    background-color: #e4e4e4; 
 
} 
 

 
.fb-Search_Input { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 

 
.js .fb-Search_Input { 
 
    position: absolute; 
 
    left: -100vw; 
 
} 
 

 
.fb-Search_FauxInput { 
 
    display: none; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    max-width: 80%; 
 
    margin-top: 14px; 
 
    border: 0; 
 
    font-size: 20px; 
 
    font-size: 1.3rem; 
 
    color: #777; 
 
    background-color: #e4e4e4; 
 
    border-right: 3px solid transparent; 
 
    height: 3px; 
 
} 
 

 
.js .fb-Search_FauxInput { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.fb-Search_Input:focus ~ .fb-Search_FauxInput { 
 
    -webkit-animation: pulseAttention 1.5s cubic-bezier(.215, .61, .355, 1) forwards infinite; 
 
    animation: pulseAttention 1.5s cubic-bezier(.215, .61, .355, 1) forwards infinite; 
 
} 
 

 
.fb-Search_Label { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 5px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    color: #a7a7a7; 
 
    font-size: 15px; 
 
} 
 

 
.fb-Search_Input:not([value=""]) ~ .fb-Search_Label { 
 
    -webkit-box-pack: end; 
 
    -ms-flex-pack: end; 
 
    justify-content: flex-end; 
 
} 
 

 
@-webkit-keyframes pulseAttention { 
 
    50% { 
 
    border-color: green; 
 
    } 
 
} 
 

 
@keyframes pulseAttention { 
 
    50% { 
 
    border-color: green; 
 
    } 
 
}

<div class="fb-Search"> 
 
\t <input id="Input" class="fb-Search_Input" value=""> 
 
\t <span class="fb-Search_FauxInput" dir="rtl"></span> 
 
\t <label class="fb-Search_Label" for="Input">Search</label> 
 
</div>