|
CSS - Password Field
I've never had to create a password field before now. I've done some research and found a basic code, but it doesn't seem to cover all the bases that I have to. Can anyone help me accomplish the following:
Quote: default state is with password field ("OFF"). when visitor enters the password, the password text and field should disappear and a number of links to PDF files should appear ("ON" state). please no reload of the page. Also, this needs to be compatible with IE6. All assistance is greatly appreciated because I'm truly at a loss with this one!! Similar TutorialsHi again (and sorry for the many questions)...I guess I'm really enjoying this stuff. I have a small snippet of code that displays a password strength meter, but I can't seem to control the height of the colored bar -- anything under 20px, and the bar doesn't change size. If I put in 100px, the bar gets bigger. Ideally, I'm looking to get the bar to a height of 2-3px. Here's the partial code from my webform... Thanks, Josh Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<style>
#passwordStrength
{
float:left;
}
.strength1
{
width:50px;
height:2px;
background:#ff0000;
}
</style>
<script>
function passwordStrength(password)
{
var desc = new Array();
desc[1] = "Very Weak";
var score = 0;
//if password not empty than give 1 point
if (password.length > 0) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
<div id="password">
<input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
</div>
<div id="passwordDescription"></div>
<div id="passwordStrength" class="strength0"></div>
</body>
</html>
input fields in tabs not appearing in IE7 though it works fine with IE8 and Firefox3 http://www.refinethetaste.com/html/cp/default.asp?Section=orders&Process=AddOrder I'm trying to align a div right after an input text field. div has a background image I want to display, but no text. div is going on the next line after input. how can I keep it to the left of the input text field? Thanks Hello, I'm really bad with CSS, so this probably a simple question. I've found some stuff on the 'net about how to set up a class to prevent <body> from printing, but I just want to prevent one table element from printing while still allowing everything else. Example - on print, allow First Name but do NOT print SSN: Code: <table> <tr> <td> First Name </td> <td> SSN </td> </tr> </table> Hi I am currently having problems changing the size (or width) of INPUT fields within a form when they have a class assigned to them. If I remove the class that is assigned then the size attribute works fine. Do I need to specify the size of the INPUT field within the CSS file that holds the class? And if so how do I do it? Thanks in advance for any help. I am using the following code to create a custom input field: Code:
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: 0 none; }
This essentially removes the border from the input field however this does not work in Safari on a Mac (works fine in Safari on Windows). Any one know how to fix this? Hi, in firefox I can do this to highlight a form element when it is selected. input[type="text"]:focus, input[type="password"]:focus, input[type~="text"]:focus, input[type~="password"]:focus, select:focus, textarea:focus { border: 1px solid #9ED175; } Is there a way I can do this in IE ? thanks scott Hi there, How do I make the background of a text field change color upon hover/rollover? Any help would be great! I have a disabled input field that is managed by PHP scripts. I need the fields to appear to the user but to look like just text. The main problem is that I have a patterned background on the page and I don't know how to create the style so that there is a transparent background on the input field. Can someone help? TIA. Why do borders not show up on my text field using the following code? PHP Code: .preRegformField { border-color: #7F9DB9; border-style: solid; border-width: 1; } <input type="text" value="name" size="15" class="preRegformField"> Testing in IE 6.0. All I get is a borderless box with a white bg. Can anyone tell me how to make a form text field one solid color? No border or anything, just a rectangle box any color. Thanks! I am simply trying to align a form (text field and submit button) to the bottom of its containing div. My method works with text, but not the form... it just stays up at the very top. The CSS: Code:
#search {
padding: 0 25px 0 0;
float: right;
}
#srchbox {
height: 118px;
position: relative;
}
#srchbox .form {
bottom: 0;
position: absolute;
}
The HTML: Code:
<div id="search">
<div id="srchbox">
<p class="form">
<form>
<input type="text"><input type="submit" value="Go">
</form>
</p>
</div>
</div>
I know that a form shouldn't be expected to act like text... but I don't know how to go about getting to align at the bottom. Thanks! hey i'm trying to get the arrow on the select field to be colored as well as the scroll bar when the options drop down. any help? Hey, all. Just wondering if anyone knows of a proper way to get rid of vertical space between text fields in a form. IE seems to like to have 2px in there, where other browsers will give me the desired 0px. For example:
Code: <input type='text' value='test' style='margin:0px; display:block;'> <input type='text' value='bottom' style='margin:0px; display:block;'> Gives me 2px of space between the 2 fields, but only in Internet Explorer.. Any thoughts? I would like to do automatic resizing textfield depending of resize browser. I know one solution with css style code. for example :<input type="text" style="position:absolute;width:50%">, but it don't accommodate me. Please, exist other solution for this problem? Hi guys, I hope I have posted this in the right category? Can anyone advise me on how I could hide this form field using some sort of yes no radio checkbox Postal Address - same / different ** If different is selected the field below is displayed. PHP Code: <label for="postal_address"> Postal Address:<br /> <textarea type="text" name="postal_address" rows="3" cols="25"><?php if(isset($_POST['postal_address'])) echo $_POST['postal_address'];?> </textarea> </label> Any help would be greatly appreciated. HI Guys, Is there a way to do the following with just css? Code: <script language="javascript">
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
</script>
// above code in header Code: <fieldset class="radio" style="padding-left: 20px;">
<legend><strong>Postal/Billing Address</strong></legend><br /><br />
<label for="Mixed1">
<input type="radio" name="postal_yn" onclick="HideContent('shaddress');"> Same
</label>
<label for="Mixed1">
<input type="radio" name="postal_yn" onclick="ShowContent('shaddress');"> Different
</label>
<div id="shaddress" style="display:none;padding-left: 20px;">
<label for="postal_address">
<br /><span style="line-height:25px;">Please enter your postal address:</span><br />
<textarea type="text" name="postal_address" rows="3" cols="25"><?php if(isset($_POST['postal_address'])) echo $_POST['postal_address'];?>
</textarea>
</label>
</div>
</fieldset>
Ok, i have this side div thats small. I want to be able to mouse-over (hover) over it or if not that click it. When either action is done, than it will reveal a input field attached to that small tab that was hovered, or clicked. If you need more details or explanation than reply, I cant really explain it but i will try. I would like to prevent safari from highlighting the field that has focus. Is this possible? I'm doing a similar effect on my site and it looks bad when they are combined. Thanks Below an input text field I want to diplay a div with the same width. Both refer to the same class Code: .fieldWidth{width:250px;}
However, once I add the XHTML 1.0 Doctype the input field becomes about 10 pixes wider in IE, Forefox, Opera and Safari (probably in all others too). Is this waht I have to expect when using xhtml (I hate it anyway :-( Thanks for your info |
|||||||