0

这个把我逼疯了。经过一个多小时的网络搜索，我没有比刚开始时更接近解决方案。听起来像一首歌。无论如何，当我悬停或聚焦（输入数据）时，我为 Moodle 测验创建的输入框具有不同的颜色。令人烦恼的问题是，当我将鼠标悬停在输入框上时，或者当我输入数据时，该框会略微扩展并将文本略微向左（或向右）推。很不客气。那是因为我已经对 CSS 进行了编程，以便在焦点或悬停时将文本显示为粗体。

这是我的代码：

input[type=text]
{
    background-color:#fff;
    border:1px solid #d8d8d8;
    color:#000;
    padding:0px 2px;
    margin:0;
    margin-bottom:10px;
    font-size: medium; font-family: 'century gothic', futura;
    font-weight:normal;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:border linear 0.2s,box-shadow linear 0.2s;
    -moz-transition:border linear 0.2s,box-shadow linear 0.2s;
    -ms-transition:border linear 0.2s,box-shadow linear 0.2s;
    -o-transition:border linear 0.2s,box-shadow linear 0.2s; transition:border linear             0.2s,box-shadow linear 0.2s;
    -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px
}

.que .formulation input[type=text]
{
    background: #FFFFFF;
    border:1px solid #000;
    color:#000;
    text-align:center;
    font-family: 'Century Gothic',futura; padding:0px 2px;
    margin:0;
    margin-bottom:5px;
}

.que .formulation input[type=text]:hover
{
    font-weight:bold;
    background: #FFFFA7;
    border:1px solid #000;
    color:#000;
    text-align:center;
    font-family: 'Century Gothic',futura; padding:0px 2px;
    margin:0;
    margin-bottom:5px;
}

.que .formulation input[type=text]:focus
{
    font-weight:bold;
    background-color:#fff;
    background: #FFFFA7;
    border:1px solid #000; color:#000;
    text-align:center;
    font-size: medium;
    font-family: 'Century Gothic',futura;
    padding:0px 2x;
    margin-bottom:5px;
}

我试过改变填充值，但这只会让情况变得更糟。

我应该怎么办？祈祷告诉。

饥饿的穷程序员 Frankie Kam

4

1 回答 1

0

您可以通过为原始输入 css 类提供数字（文字或相对）字体大小而不是中等来解决此问题。如果仅有助于提高可读性，它还有助于清理悬停和焦点样式中的重复样式。CSS 的全部目的是级联。在此处查看已清理的代码：

http://jsfiddle.net/5dQR7/

input[type=text]
{
    background-color:#fff;
    border:1px solid #d8d8d8;
    color:#000;
    padding:0px 2px;
    margin:0;
    margin-bottom:10px;
    font-size: 20px; 
    font-family: 'century gothic', futura;
    font-weight:normal;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:border linear 0.2s,box-shadow linear 0.2s;
    -moz-transition:border linear 0.2s,box-shadow linear 0.2s;
    -ms-transition:border linear 0.2s,box-shadow linear 0.2s;
    -o-transition:border linear 0.2s,box-shadow linear 0.2s; transition:border linear             0.2s,box-shadow linear 0.2s;
    -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;

}

.que .formulation input[type=text]
{
    background: #FFFFFF;
    border:1px solid #000;
    color:#000;
    text-align:center;
    font-family: 'Century Gothic',futura; 
    padding:0px 2px;
    margin:0;
    margin-bottom:5px;
}

.que .formulation input[type=text]:hover
{
    font-weight: bold;
    background: #FFFFA7;
}

.que .formulation input[type=text]:focus
{
    font-weight: bold;
    background: #FFFFA7;
}
于 2013-11-15T05:27:35.720 回答