Use of type="password" changes layout

Asked

Viewed 77 times

-5

When I put type="password" not to display the password layout text box changes. What to do?

html css password

  • What do you mean, "It changes"?

  • The text box to enter the password is not the same size as the login (user). Also it loses the colors and the background

  • 1

    is not because your css style is set to type="text"?

  • 1

    puts your code so that your question is better understood.

  • I’m starting right now in this area. Actually I was just trying to understand based on what is available on the site (bootsnipp) (https://bootsnipp.com/snippets/dldxB). I was moving around, but I realized that when I put "password" not to show the password changes the layout. The link is at the top.

  • 1

    Thanks to the gentlemen for the help. It worked by changing type=text from css.

Show 1 more comment

3 answers

1

The simple use of this control does not alter style, but as it is a different control from others input It may be that your style is not configured properly to handle this, the styling may not be cascading properly and for this type is falling in another style. To make sure I only see the big picture. Either you do the styling for all the controls (at least in this hierarchy of the waterfall) or you do styling for each one. It seems to me that the simplest to what you want would be this (which should not be in your code, so the failure):

input {
    background: #C0C0C0;
    height: 20px;
}
Login:<br/>
<input type="text"><br/>
Senha:<br/>
<input type="password">

I put in the Github for future reference.

  • Got it. Thank you very much for the answer, it was of great help to my studies.

  • @Thiagojhosé changed because I think what you want is this, the question did not show what you were doing so it was complicated to be sure. It would still be nice for something to show the problem, as we did here in the answers.

  • 1

    And in fact the alteration of the input is enough. What the author described in the question does not normally happen, its problem is caused by a previous CSS (i.e., it is an error or limitation in its code, which was not presented in the post, and not a problem of CSS technology itself). The accepted answer is actually probably just an outline

0


It is actually possible to make a change to the text box by changing its type. Since it’s about style, it’s likely that somewhere in your project you have a file .css or even within the tag <style> where there may be a simple style change of your input. Take a look below at how this is possible:

input[type="text"]{
    background: #eee;
    height: 40px;
    color: #000;
}

input[type="password"]{
    background: #ccc;
    height: 40px;
    color: #000;
}
Login:
<br/>
<input type="text">
<br/>
Senha
<br/>
<input type="password">
<br/>

That said, it is necessary to stylize your input like PASSWORD to maintain the same shape in other types, such as the TEXT, or something similar.

  • 1

    Thank you. I was analyzing the code and I changed the "type=text" of the CSS just as colleagues did. Thank you very much for the answer, it was of great help to my studies.

-1

Doubt solved with the help of colleagues. Thank you to All.

Workaround: Only change "type=text" to "type=password" from css.

I thank All.

Browser other questions tagged html css password

You are not signed in. Login or sign up in order to post.