当文本框模式更改为密码时 css 不工作

Question

在我的元素中，我设计了一个用于登录的带有图像和文本框的框。我得到了我的设计。但是当我将文本框模式更改为密码时。这个 css 样式崩溃了。

我的设计-

带有图像的文本框。我将其设计为带有一个 div 的图像和文本框。然后我将 div 设置为显示在文本框边框中。

样式 -

    #logtxt1-form
    {
        height: 40px; /*border: 1px solid #999;*/
        border: 1px solid #000;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: #fff;
        overflow: hidden;
    }
    .logtxt1-text
    {
        font-size: 14px;
        color: #ddd;
        border-width: 0;
        background: transparent;
    }

    #logtxt1-box input[type="text"]
    {
        width: 85%; /*width: 70%;
padding: 11px 0 12px 1em;*/
        color: #333;
        outline: none;
        padding-top: 11px;
        padding-left: 45px;
    }
     .logtxt1-image
    {
        position: absolute;
        width:25px;
        padding-top: 7px;
        padding-left: 5px;
    }

ASPX-

<div id="logtxt1-box">
    <div id="logtxt1-form">
        <asp:Image ID="Image4" ImageUrl="~/Images/password.png" runat="server" CssClass="logtxt1-image" />
        <asp:TextBox ID="TextBox2" runat="server" placeholder="Search" CssClass="logtxt1-text" TextMode="Password" />
    </div>
</div>  

输出图像-

Answer 1

您的 CSS 规则指定了应用它的元素:

#logtxt1-box input[type="text"]

“密码”类型的输入不是“文本”类型的输入。您还需要指定:

#logtxt1-box input[type="text"], #logtxt1-box input[type="password"]

顺便说一句，当您查看实际的客户端 HTML 而不是服务器端 ASP.NET 控件时，调试您的 CSS 很多容易。