Javascript 输入'；s插入符号高度

我需要帮助来更改插入符号的高度-而不改变视觉效果（只要它们有效，就允许使用黑客/技巧）。
因此，我的意思是我不想更改字体的大小（高度和宽度）、边距、填充、颜色、背景、边框等，如果我确实更改它以实现插入符号的样式，使它成为可能，这样我就可以把它像一个正常的输入回来，它的造型能力

我的最佳尝试是使用以下代码：

正文{
背景颜色：浅蓝色；
}
#背景{
颜色：红色；
高度：61px；
边际上限：0px；
文本阴影：0透明；
宽度：173像素；
-webkit文本填充颜色：透明；
-webkit变换：比例（1，计算（1/3））；
}
#正文{
背景色：透明；
边框颜色：透明；
颜色：红色；
左：8px；
指针事件：无；
位置：绝对位置；
顶部：103px；
}

插入符号的高度（像素）：



这可以通过“黑客”来完成

您需要的不是输入框，而是javascript、css和span的组合

document.documentElement.setAttribute（“class”、“js”）；
var searchFauxInput=document.querySelector（“.fb-Search\u FauxInput”）；
var searchBox=document.getElementById（“输入”）；
searchBox.addEventListener（“keyup”），函数copyInput（事件）{
searchFauxInput.textContent=searchBox.value；
searchBox.setAttribute（“值”，searchBox.value）；
}，假）
*{
框大小：边框框；
}
身体{
背景色：#555；
字体系列：无衬线；
}
.fb搜索{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
高度：44px；
填充物：5px70px 5px 5px；
宽度：400px；
位置：相对位置；
背景色：#e4；
}
.fb-Search_输入{
-webkit外观：无；
-moz外观：无；
外观：无；
}
.js.fb-Search_输入{
位置：绝对位置；
左：-100vw；
}
.fb-Search_FauxInput{
显示：无；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
最大宽度：80%；
边缘顶部：14px；
边界：0；
字体大小：20px；
字体大小：1.3rem；
颜色：#777；
背景色：#e4；
右边框：3px实心透明；
高度：3倍；
}
.js.fb-Search_FauxInput{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
.fb-Search_输入：焦点~.fb-Search_输入{
-webkit动画：pulseAttention 1.5s立方贝塞尔（.215、.61、.355、1）无限向前；
动画：pulseAttention 1.5s立方贝塞尔（.215、.61、.355、1）无限向前；
}
.fb-Search_标签{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
填充物：5px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
颜色：#A7A7；
字体大小：15px；
}
.fb-Search_输入：不（[value=”“]）~.fb-Search_标签{
-webkit盒式包装：结束；
-ms-flex-pack：结束；
证明内容：柔性端；
}
@-webkit关键帧脉冲注意{
50% {
边框颜色：绿色；
}
}
@关键帧脉冲注意{
50% {
边框颜色：绿色；
}
}

搜寻
快速浏览一下，我认为输入元素是不可能的。你可以用一个内容可编辑的div来模拟输入。这在技术上是不可能的@Teemu，这就是为什么我说hacks/tricks。解决方法是正确的。对于编辑人员：请不要在代码片段中转换代码，因为这通常会破坏结果的视觉效果。为了确保你得到的和我一样，请在你的页面中测试它。@user7393973代码片段对我来说很好，只是出于好奇-你为什么要这样做？我看不到任何合理的理由来证明这项跨平台工作的努力是合理的。最重要的是，它打破了用户体验惯例。这并不意味着你没有正当的理由——我只是好奇这可能是什么；）