Question

我为登录屏幕创建了以下CSS，但.cssbox, input[type=text]:focus CSS影响了所有不同页面上的所有文本框。

我只想将它用于登录页面。

我有一个样式表主题适用于所有页面：

.cssbox 
{
    border: solid 1px #C3D9E0;
    background-color: #eeeeff;
    background-image: url(/images/console-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    /*width: 460px;*/
    margin-left: 30%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    /*border-radius: 4px;*/
}

.cssbox, input[type=text]:focus, input[type=password]:focus, 
    textarea:focus, select:focus
{
    border-color: #66afe9;
    outline: 0;
    -moz-box-shadow: 0 0 3px 0 #95B8E7;
    -webkit-box-shadow: 0 0 3px 0 #95B8E7;
    box-shadow: 0 0 3px 0 #95B8E7;
}


<table class="cssbox" cellpadding="5" cellspacing="0" 
    border="0" width="398px" style="height: 287px;margin:0 auto;">

    <tr style="height: 22px">
         <td>
            <asp:TextBox ID="txtEmail" 
                runat="server" type="text" placeholder="Username" 
                CssClass="cssbox-input-text"></asp:TextBox>        
         </td>
    </tr>

</table>

Answer 1

如果我理解正确你想要只在.cssbox中应用css，那么你必须像这样修改你的CSS：

.cssbox input[type=text]:focus,
.cssbox input[type=password]:focus,
.cssbox textarea:focus,
.cssbox select:focus   
{
   border-color: #66afe9;
   outline: 0;
   -moz-box-shadow: 0 0 3px 0 #95B8E7;
   -webkit-box-shadow: 0 0 3px 0 #95B8E7;
   box-shadow: 0 0 3px 0 #95B8E7;
 }

Answer 2

一个想法是仅在登录页面上向body标签添加一个类，即：

<body class="login-page">
    ....
</body>

然后从

更改CSS选择器

.cssbox, input[type=text]:focus

到

.login-page .cssbox, .login-page input[type=text]:focus

所以它是相同的匹配条件，除了这些元素必须是具有登录页面类的元素的子元素（您只应用于登录页面的body标记）。

编辑：其他答案有一个好点 - 您选择的选择器显示不正确。如果是这样的话，那么这个答案并不适用......

Answer 3

登录页面是class="cssbox"唯一吗？

如果是这样，您需要指定input[type=text]:focus，如此：

.cssbox input[type=text]:focus {

...

}

如果您需要相同的框阴影和边框样式以应用于.cssbox及其包含的input[type=text]:focus，那么您需要：

.cssbox, .cssbox input[type=text]:focus {

...

}

CSS正在影响所有页面，但我只想将它用于一个页面

3 个答案: