入力のキャレットの高さ

Question

キャレットの高さを変更するには、ビジュアルを変更することなく、キャレットの高さを変更する必要があります。
これは、フォントのサイズ（高さと幅）、余白、パディング、色、背景、境界線などを変更したくないことを意味し、キャレットのスタイルを達成するためにそれを変更すると、通常の入力のように戻すことができます。スタイリングの能力もあります。あなたが必要な場合は、テキストの選択おかしなを無視

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

：

私の最高の試みは、次のコードでした。私は今それについて気にしていません。

解決策がある場合は、教えてください。これは私がやっているいくつかのテストです、私は正確に色が赤である必要はありませんし、他の属性は彼らの方法であることが必要ですが、私はそれが私が望むwhatherに変えることが依然として可能であることを望みます。

Answer 1

それは「ハック」を介して、行うことができます。ここでは

は、それは人々が（Chromeを使用して）同じを取得しない場合は、私にはどのように見えるかです。

代わりに、入力ボックスのは、JavaScript、CSSおよびスパンの組み合わせを必要とするだろう...

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>