設置文本框中輸入字體大小等於輸入文本框的高度

好吧，我基本上有一個.search_bar_container類，看起來像如下：設置文本框中輸入字體大小等於輸入文本框的高度

#search_bar_container{ 
    width: 81%; 
    overflow: hidden; 
    z-index: 1; 
    position: absolute; 
    top: 45%; 
    left: 13.3%; 
    height: 10%; 
}

並有.search_bar類：

#search_bar{ 
    width: 80%; 
    height: 99%; 
    font-family: cursive; 
    font-size: vh; 
    box-shadow: 1px 1px 5px black; 
}

下一頁我的HTML的外觀這樣

<div id='search_bar_container'><input id='search_bar'/></div>

問題
我給你的問題是如何設置搜索欄的字體大小等於search_bar的高度？事情我已經嘗試到目前爲止： 100％...嗯，我不知道爲什麼這永遠不會用於設置相對於文本框的字體大小。 100vh ...將大小設置爲身體的100％...任何方式我可以更改視口並將其設置爲search_bar容器...？

來源

2012-10-20 foklepoint

對於那些不支持'vh' /'vw'單元的瀏覽器（包括Chromium 18/Ubuntu 11.04 ... * sigh *），JavaScript的回退可以接受嗎？純粹是CSS（因此在不支持的瀏覽器中是不完美的）。 –

Javascript是好的。你有什麼建議？ – foklepoint

不確定，但;我對Chromium的失敗感到驚訝，並且正在研究如何切換到beta/unstable/nightly/dev分支。所以，呃，還沒有真正研究它。我假設你想讓字體大小爲視口高度的9.9％（ish）？ –

我知道這是晚了，但我想與你分享我的解決方案。當頁面加載和頁面大小調整時，我使用JavaScript來更改輸入字體。將font-size設置爲offsetHeight的輸入。然後字體大小將等於輸入高度。我認爲文本不適合的話，這就是爲什麼我用這樣的高度的70％：

//when window changes its size, make text fit again 
 
window.onresize = function(event) { 
 
    document.getElementById("username").style.fontSize = (document.getElementById("username").offsetHeight*0.7) + "px"; 
 
    document.getElementById("password").style.fontSize = (document.getElementById("password").offsetHeight*0.7) + "px"; 
 
}; 
 

 
//when page loads make text fit text box 
 
function myFunction(){ 
 
document.getElementById("username").style.fontSize = (document.getElementById("username").offsetHeight*0.7) + "px"; 
 
document.getElementById("password").style.fontSize = (document.getElementById("password").offsetHeight*0.7) + "px"; 
 
}

#username{ 
 
width:85%; 
 
height:100px; 
 
font-size:25px; 
 
padding-left:20px; 
 
padding-right:20px; 
 
} 
 

 
#password{ 
 
width:85%; 
 
height:50px; 
 
font-size:25px; 
 
padding-left:20px; 
 
padding-right:20px; 
 
} 
 

 
body{ 
 
text-align:center; 
 
}

<html> 
 
<body onload="myFunction()"> 
 
<p><input type="text" id="username" placeholder="Username"/></p> 
 
<p><input type="password" id="password" placeholder="Password"/></p> 
 
</body> 
 
</html>

如果你想設置字體大小，以更多或輸入高度小於70％，將0.7改爲你想要的數字。

來源

2017-08-08 15:54:34

設置文本框中輸入字體大小等於輸入文本框的高度

回答

相關問題