Question

这个人把我推到了墙上。经过一个多小时的网络搜索，我比起初开始时更接近解决方案。听起来像一首歌。无论如何，当我进行悬停或聚焦（输入数据）时，我为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

Answer 1

您可以通过为原始输入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;
}

使用粗体字体时，我的输入框略有扩展。不是我想要发生的事情

1 个答案: