override type=password for input format

Question

this is my login widget. as you can see the username and password fields have different textboxes. i want them to only have the textbox which the "username" field has. problem is that the only thing that differs them is the input type. and i want the password field to not show the password. which the username field will.

so how do i solve this?

the code is this:

<div id="sidebar">
<div class="widget">
    <h3 class="widgettitle">Honestreviews.se</h3>
    <div class="textwidget">
        <form action="../login-exec.php" method="post">
        <ul id="login">
            <li>
                Username:<br>
                <input name="login" type="text" id="login" />
            </li>
            <li>
                Password:<br>
                <input name="password" type="password" id="password" />
            </li>
            <li>
                <input type="submit" value="Log in">
            </li>
            <li>
                <a href="register.php">Register</a>
            </li>
    </div>
</div>
<div class="widget_divide"></div>

ive updated the code in the main post. do you think anything of that interferes? — Henk
– Henk, Commented Aug 19, 2014 at 11:39
hmm, i tried removing the entire css and just write "hi" in it. and the site still didnt update. i wonder why. that might be the problem — Henk
– Henk, Commented Aug 19, 2014 at 11:43

James Donnelly · Accepted Answer · 2014-08-19 11:27:58Z

4

The problem is your CSS. Most likely you're only targeting input elements whose type is "text" (although you may also be only targeting a name or id equal to "login"):

input[type="text"] {
    ...
}

You can rectify this by including input elements with a type of "password":

input[type="text"],
input[type="password"] {
    ...
}

Update: Based on the code you've provided your selector will need to be changed at line 1166. You'll also need to change your :focus selector at line 1189:

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    ...
}

As a side note, semantically your code appears to be invalid. Your form elements are wrapped in li elements. What exactly is this a list of?

answered Aug 19, 2014 at 11:27

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Henk Over a year ago

ive bought the css because i really and truely hate fighting with the css. and the code i provided isnt the whole. ill include it. check main post again

James Donnelly Over a year ago

@Henk your HTML is missing the closing </form> and </ul> tags. The semantics issue still stands though, as the ul element is designed to represent lists (of data), not form elements.

Henk Over a year ago

THANK you for this. the code is fixed thanks to your answer. i love kind people who help me with my hate for css!

Collectives™ on Stack Overflow

override type=password for input format

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related