gpt4 book ai didi

css - 使用:focus?时如何调整输入框的宽度

转载 作者:太空宇宙 更新时间:2023-11-04 04:36:54 25 4
gpt4 key购买 nike

我有以下代码:

#inputfield
{
width: 300px;
height: 28px;
font-style: italic;
outline: medium none;
padding: 3px 0px 3px 5px;
margin: -2px 1px 3px 0px;
box-shadow:inset 0 0 4px 0 #dfdfdf;
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf;
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf;
text-align: center;
font-size: 16px;
color: #9A9A9A;
font-family: Georgia, Arial, sans-serif;
}
#inputfield:focus {
color: #797f86;
text-align: left;
padding-left: 10px;

当输入框被点击输入时,输入框的宽度会增加。原因是我在 :focus 中有 padding-left: 10px。我需要 padding-left 所以不确定如何仍然使用这个解决方案并且没有宽度问题?

我也尝试在 :focus 伪选择器中添加一个宽度,但没有成功。我试过使用这个:

    -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

但这并没有什么不同。

最佳答案

简单:从#inputfield 中删除填充并将高度增加到 31px 而不是 28px,并在#inputfield:focus 中将宽度减少到 290px。

HTML:

 <input id="inputfield" placeholder="Enter Text">

CSS:

 #inputfield {
width: 300px;
height: 31px;
font-style: italic;
outline: medium none;
margin: -2px 1px 3px 0px;
box-shadow:inset 0 0 4px 0 #dfdfdf;
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf;
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf;
text-align: center;
font-size: 16px;
color: #9A9A9A;
font-family: Georgia, Arial, sans-serif;
border: 1px solid #206CAF;
}
#inputfield:focus {
color: #797f86;
text-align: left;
padding-left: 10px;
border: 1px solid #9A9A9A;
width: 290px;
}

参见 fiddle :http://jsfiddle.net/HjaTZ/

关于css - 使用:focus?时如何调整输入框的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16225740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com