当文本框模式更改为密码时，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"]

input类型＆＃34;密码＆＃34;不是input类型＆＃34; text＆＃34;。您还需要指定它：

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

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