Jump to content

Trouble formatting password field

MargateSteve

By MargateSteve
in CSS Help

 Share

Recommended Posts

MargateSteve Regular Member

MargateSteve

Posted
Posted

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.

 

loginfault.jpg

 

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%;
}

Link to comment
Share on other sites
Mahngiel Member

Mahngiel

Posted
Posted

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

Link to comment
Share on other sites
MargateSteve Regular Member

MargateSteve

Posted
  • Author
Posted

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.