इनपुट के कैरट ऊंचाई

Question

मैं कैरट की ऊंचाई बदलने के लिए मदद की जरूरत है।
इसी के साथ मेरा मतलब है मैं फ़ॉन्ट का आकार (ऊंचाई और चौड़ाई), मार्जिन, paddings, रंग, पृष्ठभूमि, सीमा, आदि को बदलने के लिए नहीं करना चाहते हैं, और अगर मैं कैरट की शैली को प्राप्त करने के लिए यह बदल सकता हूँ, यह संभव तो कर रहा इसे स्टाइलिंग क्षमताओं के साथ, इसे सामान्य इनपुट की तरह वापस रख सकते हैं।

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">

पाठ का चयन weirdness पर ध्यान न दें, अगर आप की जरूरत है:

मेरे सबसे अच्छे प्रयास के बाद कोड था। मैं इसके बारे में अभी परवाह नहीं कर रहा हूं।

आप एक तरह से बेहतर समाधान है, मुझे पता है। यह केवल कुछ परीक्षण हैं जो मैं कर रहा हूं, मुझे बिल्कुल लाल रंग की आवश्यकता नहीं है और अन्य विशेषताएं जिस तरह से हैं, लेकिन मैं चाहता हूं कि उन्हें अभी भी जो कुछ भी चाहिए, उसे बदलना संभव हो।

यहाँ कैसे यह मामला लोगों में मुझे लग रहा है एक ही (क्रोम का उपयोग) नहीं मिलता है: के माध्यम से

Answer 1

यह किया जा सकता है, "हैक"।

एक इनपुट बॉक्स के बजाय, आप जावास्क्रिप्ट, सीएसएस और अवधि के का एक संयोजन की आवश्यकता होगी ...

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>