Trouble formatting password field

[MargateSteve]

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]

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]

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]

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]

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

[MargateSteve]

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