Trouble formatting password field

MargateSteve · June 23, 2012

I have been trying to adapt a template to suit my needs and am struggling to get the 'username' and 'password' fields to match on the log-in.

If I choose type="text" for both it works fine but if I choose type="password" for the password field, both fields lose all formatting including the placeholder.

I have tried duplicating all styles for inputs, appending input[type=password] to the new ones but the results were the same.

I am sure this is something simple but since 6pm yesterday, I have been drawing a blank!

Any advice would be appreciated.

Thanks

Steve

<div id="mws-login">
  <div id="mws-login-form">
  <form class="mws-form" action="" method="post">
      <div class="mws-form-row">
        <div class="mws-form-item large">
          <input id="name" type="text" name="Lname" class="mws-login-username mws-textinput" placeholder="username" />
        </div>
      </div>
      <div class="mws-form-row">
        <div class="mws-form-item large">
          <input id="password" type="text" name="Lpassword" class="mws-login-password mws-textinput" placeholder="password" />
        </div>
      </div>
  </div>
<span class="fltrt">
  <input type="submit" value="LOGIN" class="mws-button black" />
  <input type="submit" name="cancel" value="CANCEL" class="mws-button black" />
</span>
  </form>
<span class="loginprob"><a href="loginhelp.php">Login Problems ?</a></span>
</div>

form.css

.mws-form
{
clear:both;
display:block;
}

.mws-form .mws-form-row
{
padding:12px 24px;
}

.mws-form .mws-button-row.left
{
text-align:left;
}

.mws-form .mws-button-row
{
padding:16px 24px;
border-top:1px solid #bcbcbc;
text-align:right;
background:url(/inc/images/core/mws-inset.png);
}

.mws-form .mws-form-item
{
min-height:34px;
height:34px;
height:auto !important
}

.mws-form fieldset
{
margin:0;
}

.mws-form ul.mws-form-list, 
.mws-form ul.mws-form-list li
{
margin:0;
list-style:none;
}

.mws-form fieldset
{
border-top:1px dotted #bcbcbc;
padding-top:16px;
}

.mws-form fieldset legend
{
margin-left:24px;
padding:0 4px;
border:1px dotted #bcbcbc;
}

.mws-form .mws-form-inline label
{
padding-top:7px;
}

.mws-form label
{
padding-bottom:7px;
cursor:pointer;
}

.mws-form label span.required
{
color:#FF0000;
}

/* Input Styles */

.mws-form .mws-form-item select, 
.mws-form .mws-form-item textarea, 
.mws-form .mws-form-item .mws-textinput, 
.mws-form .mws-form-item.large select, 
.mws-form .mws-form-item.large textarea, 
.mws-form .mws-form-item.large .mws-textinput
{
width:100%;
}

.mws-form .mws-form-item.medium select, 
.mws-form .mws-form-item.medium textarea, 
.mws-form .mws-form-item.medium .mws-textinput
{
width:75%;
}

.mws-form .mws-form-item.small select, 
.mws-form .mws-form-item.small textarea, 
.mws-form .mws-form-item.small .mws-textinput
{
width:55%;
}

.mws-form select, 
.mws-form textarea, 
.mws-form .mws-textinput, 
.mws-form .file
{
border:1px solid #c5c5c5;
padding:6px 7px;
color:#323232;
margin:0;
background-color:#ffffff !important;
outline:none;

/* CSS 3 */

-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;

box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;

-moz-box-shadow:inset 0px 1px 3px rgba(128, 128, 128, 0.1);
-o-box-shadow:inset 0px 1px 3px rgba(128, 128, 128, 0.1);	
-webkit-box-shadow:inset 0px 1px 3px rgba(128, 128, 128, 0.1);
-khtml-box-shadow:inset 0px 1px 3px rgba(128, 128, 128, 0.1);
box-shadow:inset 0px 1px 3px rgba(128, 128, 128, 0.1);
}

.mws-form select:disabled, 
.mws-form textarea:disabled, 
.mws-form .mws-textinput:disabled
{
background:#f0f0f0;
}

.mws-form select.error, 
.mws-form textarea.error, 
.mws-form .mws-textinput.error
{
border-color:#eb979b;
}

/* Placeholder Text */

.mws-form .placeholder
{
  color: #aaa;
}

/* Inline Form Elements */

.mws-form .mws-form-inline .mws-form-item
{
margin-left:136px;
}

.mws-form .mws-form-inline label
{
width:120px;
display:block;
float:left;
margin-right:16px;
}

/* Block Form Elements */

.mws-form .mws-form-block label, 
.mws-form .mws-form-block .mws-form-item
{
display:block;
width:100%;
margin:0;
float:none;
}

/* Form List */

.mws-form .mws-form-inline ul.mws-form-list
{
float:left;
width:68%;
margin-top:4px;
}

.mws-form .mws-form-inline .mws-form-item ul.mws-form-list
{
width:100%;
}

.mws-form ul.mws-form-list, 
.mws-form .mws-form-block ul.mws-form-list
{
display:block;
width:100%;
}

.mws-form ul.mws-form-list.inline li
{
float:left;
margin-right:10px;
}

.mws-form ul.mws-form-list li label
{
width:auto;
float:none;
margin:0;
padding:0;
display:inline;
vertical-align:middle;
}

.mws-form ul.mws-form-list li input
{
vertical-align:middle;
}

/* Textarea */

.mws-form textarea
{
height:10em;
resize:none;
}

/* Form Clearfix */

.mws-form .mws-form-row:before,
.mws-form .mws-form-row:after
{
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}

.mws-form .mws-form-row:after
{
clear: both;
}

.mws-form .mws-form-row
{
zoom: 1;
}

/* Messages */

.mws-form-message
{	
font-size:12px;
border-bottom:1px solid #d2d2d2;
padding:15px 8px 15px 45px;
position:relative;
vertical-align:middle;
background:#f8f8f8;
}

.mws-form-message p, 
.mws-form-message ul, 
.mws-form-message ol
{
margin:0;
}

.mws-form-message ul li, 
.mws-form-message ol li
{
list-style-position:inside;
list-style-type:inherit;
margin:0;
}

.mws-form-message .mws-message-close
{
background:url(/inc/images/mws-close-btn.html) no-repeat left center;
width:18px;
height:18px;
display:block;
position:absolute;
right:10px;
top:11px;
cursor:pointer;
}

.mws-form-message.error
{
background-color:#ffcbca;
background-image:url(/inc/images/core/message-error.png);
background-position:12px 12px;
background-repeat:no-repeat;
border-color:#eb979b;
color:#9b4449;
}

.mws-form-message.success
{
background-color:#e1f1c0;
background-image:url(/inc/images/core/message-success.png);
background-position:12px 12px;
background-repeat:no-repeat;
border-color:#b5d56d;
color:#62a426;
}

.mws-form-message.warning
{
background-color:#fef0b1;
background-image:url(/inc/images/core/message-warning.png);
background-position:12px 12px;
background-repeat:no-repeat;
border-color:#ddca76;
color:#a98b15;
}

.mws-form-message.info
{
background-color:#bce5f7;
background-image:url(/inc/images/core/message-info.png);
background-position:12px 12px;
background-repeat:no-repeat;
border-color:#a6d3e8;
color:#11689E;
}

.mws-form .mws-form-item .mws-error, 
.mws-form .mws-form-item label.error, 
.mws-form .mws-form-item span.error, 
.mws-form .mws-form-item div.error
{
font-size:11px;
display:block;
width:auto;
float:none;
margin:-4px 0 0 0;
padding:10px 8px 6px 8px;
cursor:default;
background:#c83139;
color:#ffffff;

/* CSS 3 */

-moz-border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
-o-border-radius:0 0 4px 4px;
-khtml-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
}

/* File Style */

.mws-filestyle
{
padding-right:87px !important;
}

.feat
{
outline:none;
cursor:pointer;
background:#e0e0e0 url(/inc/images/core/mws-file-btn.png) no-repeat center center;
color:#666666;
height:28px;
border:1px solid #ababab;
margin-left:-80px;
text-align:center;

/* CSS 3 */

-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
-o-border-radius:0 3px 3px 0;
-khtml-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;

-webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
-moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
-o-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
-khtml-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
}

.feat:active
{
-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
-o-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
-khtml-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
}

.feat .mws-filestyle
{
padding:2px 0 !important;
}

/* Color Picker */

.mws-colorpicker
{
background-image:url(/inc/images/core/cpicker.png);
background-repeat:no-repeat;
background-position:right center;

width:150px !important;
padding-right:32px !important;
}

/* Dual List Box */

div.mws-dualbox
{
position:relative;
}

div.mws-dualbox .countLabel
{
margin-top:4px;
display:block;
}

div.mws-dualbox .mws-dualbox-col1, 
div.mws-dualbox .mws-dualbox-col2,  
div.mws-dualbox .mws-dualbox-col3
{
width:40%;
float:left;
}

div.mws-dualbox .mws-dualbox-col2
{
width:20%;
text-align:center;
position:relative;
margin-top:150px;
}

div.mws-dualbox .mws-dualbox-col2 button
{
width:32px;
height:32px;
}

div.mws-dualbox .mws-dualbox-filter
{
margin-bottom:10px;
}

div.mws-dualbox .mws-dualbox-filter label
{
display:block;
}

div.mws-dualbox .mws-dualbox-filter .mws-textinput
{
float:left;
margin-right:-32px;
padding-right:36px;
}

div.mws-dualbox .mws-dualbox-filter button
{
float:left;
margin:0;
width:32px;

/* CSS 3 */

-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
-o-border-radius:0 3px 3px 0;
-khtml-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}

div.mws-dualbox button
{
outline:none;
font-size:11px;
margin:2px;
height:30px;
text-align:center;
line-height:16px;
cursor:pointer;

background-color:#e0e0e0;
color:#666666;
border:1px solid #ababab;
font-family:Tahoma, Arial, Helvetica, sans-serif;

/* CSS 3 */

-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;

-webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
-moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
-o-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
-khtml-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.3);
}

div.mws-dualbox button:active
{
-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
-o-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
-khtml-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2), inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
}

@media only screen and (max-width: 760px) {
/* Inline Form Elements */

.mws-form .mws-form-inline label, 
.mws-form .mws-form-inline .mws-form-item
{
	display:block;
	width:100%;
	margin:0;
	float:none;
}

.mws-form .mws-form-inline ul.mws-form-list
{
	float:none;
	width:auto;
	display:block;
}
}

login.css

div#mws-login
{
background:url(/inc/images/core/mws-dark-bg.png);
height:218px;
margin:auto 0;
position:relative;
padding:12px 16px;


border-top:2px solid #535353;

/* CSS 3 */
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}

div#mws-login h1
{
color:#ffffff;
padding:0 8px 8px 8px;
font-size:18px;
margin:0;
position:relative;
background:url(/inc/images/core/mws-login-stitch.png) repeat-x left bottom;
}

div#mws-login .mws-login-lock
{
background:url(/inc/images/core/mws-login-circle.png) no-repeat center center;
position:absolute;
padding:8px;
right:-10px;
top:-10px;
}

div#mws-login form
{
background:url(/inc/images/core/mws-login-stitch.png) repeat-x left bottom;
}

div#mws-login .mws-form-row
{
padding-left:0;
padding-right:0;
}

div#mws-login input.mws-login-username
{
background-image:url(/inc/css/icons/16/user.png);
background-repeat:no-repeat;
background-position:8px center;
}

div#mws-login input.mws-login-password
{
background-image:url(/inc/css/icons/16/key.png);
background-repeat:no-repeat;
background-position:8px center;
}

div#mws-login input.mws-login-username, 
div#mws-login input.mws-login-password
{
padding:8px 8px 8px 32px;
border:1px solid #323232;
}

div#mws-login input.mws-login-button
{
width:100%;
}

MargateSteve · June 23, 2012

As a quick update. If I remove the name attribute (name="Lpassword" ) from the password field it shows up correctly. However, I need this to process the form, unless there is another way around it?

Thanks

Steve

Mahngiel · June 23, 2012

Your problem is right here:

<div class="mws-form-row">
        <div class="mws-form-item large">
          <input id="password" type="text" name="Lpassword" class="mws-login-password mws-textinput" placeholder="password" />
        </div>
      </div>

Several things to say about this

[*] Form inputs for passwords are type="password"

[*] This errors also fails your targeting, since there is no input[type=password]

[*] If you're going to style special forms that only have one purpose, do not generically style them, instead, style them by their id

MargateSteve · June 23, 2012

Sorry, I think I may have confused you with my first post.

The code I gave was to show that the formatting is correct if you use type="text" on the password field (which is incorrect usage) which is the image on the left.

If I use type="password" on the password field, this is when I get the image on the right.

Also, as I mentioned, I have tried to create duplicates of all 'input' styles and name those ones input[type=password].xxx but this gave the same result.

The initial styling is in a template my friend purchased. They all came as .html files and he asked me to convert them all to php and split the header/footer/navigation into their own files.

In the original .html file, the password field was also type="password" and formatted the same as the username field.

The strangest thing is, if you assign name="xxx" to only one of them everything works fine. If you assign the same name="xxx" to both of them everything works fine. It is only when you assign a different name="xxx" to each of them there is a problem!?!?

Thanks

Steve

Mahngiel · June 23, 2012

Chances are you have some Javascript managing the password field then.

MargateSteve · June 24, 2012

I think you may have been right. I ditched everything that was there and re-wrote the log-in form/css and everything works fine now.

Thanks

Steve

Sign In

Trouble formatting password field

Recommended Posts

MargateSteve

Link to comment

Share on other sites

MargateSteve

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

MargateSteve

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

MargateSteve

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information