css not working when textbox mode changed as password

Question

In my project I have designed style a box with image and textbox for login. I got my design. but when i change the textbox mode to password. this css style collapsed.

My design -

textbox with the image. I have designed this as image and textbox with one div. and I make the div as show in textbox border.

Style -

    #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>  

Output Image -

Answer 1

Your CSS rule specifies the elements to which it is applied:

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

An input of type "password" is not an input of type "text". You need to specify that as well:

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

As an aside, debugging your CSS is a lot easier when you look at the actual client-side HTML, not the server-side ASP.NET controls.