I have a simple form which is like this:
The HTML:
<form action="post">
<input class="text" type="text" name="firstname" value="First Name"/>
<br />
<input class="text" type="text" name="lastname" value="Last Name" />
<br />
<input class="text" type="text" name="username" value="Username" />
<br />
<input class="text" type="password" name="password" value="password" />
<br />
<input class="button" type="submit" value="Submit" />
<br />
</form>
The CSS:
fieldset { margin:1em 0; }
form { margin:0; }
input { }
input.text { color: #aaa; }
input:focus { background:#ddd; }
input, select, textarea { display:block; margin-bottom:5px; padding:5px 10px; }
input[type="checkbox"], input[type="radio"] { padding: 0; display:inline; vertical-align:-1px; }
input[type="submit"] { cursor:pointer; }
label { font-weight:normal; display:block; margin-top:0.5em; }
The Output:
What I want is.....
When a visitor clicks in the input field and the background-color changes to #ddd (whch I am achieving by using css input:focus { background:#ddd; }), Can the text like 'Last Name' be hidden. Can I use some css like display:none or something else.
If yes, how? Kindly help.
Please note: I do not want to use any JavScript if possible.
In html 5 you can use placeholder lik this:
<input class="text" type="text" name="lastname" value="" placeholder="Last Name"/>
And for older browser i use this jquery script
if ($.browser.msie) {
$("input[type=text], textarea").each(function() {
return $(this).val($(this).attr("placeholder")).addClass("placeholder");
}).bind("focus", function() {
if ($(this).val() === $(this).attr("placeholder")) {
return $(this).val("").removeClass("placeholder");
}
}).bind("blur", function() {
if ($(this).val() === "") {
return $(this).val($(this).attr("placeholder")).addClass("placeholder");
}
});
}
Even if you hide the value as you discuss in your question, you'll remove the ability to see any value that has been input.
You'll either need to use the placeholder attribute (form of placeholder="Some text") or javascript. Support for the placeholder attribute isn't brilliant: http://caniuse.com/#search=placeholder.
Or even better, you could use placeholder and include a polyfill that addresses any browsers without support: https://github.com/ginader/HTML5-placeholder-polyfill
Related
I'm working with AngularJS to set image buttons disabled/enabled.
My css selector to show them transparent isn't working.
I've started with a try it that selects a disable on an input element and there it does indeed apply the css, but not in case of my div elements.
I've added my div elements that don't work, resulting in the following code:
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div:disabled {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
</body>
</html>
The disabled is getting added/removed for my AngularJS html elements. So how do I get the css to apply to a div with disabled added to it?
Note: I know it's possible to duplicate the elements, use ng-if to show/hide them and apply the transparency to it with a class, but that's very ugly.
:disabled pseudo selector will work only for input elements. For div, use div[disabled] to apply css
Use
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Demo
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
Select all disabled input elements (such as input, textarea, select, option, radio, checkbox, button) :
*:disabled{
//enter code here
}
Select all other disabled elements (such as div, section, p, etc):
*[disabled]{
//enter code here
}
Use the attribute selector [attribute='value'], which will work on all types of elements, compared to the pseudo-class :disabled, which only works on form elements
And in your case, where the attribute disabled doesn't have a value, you can omit it [disabled]
Note, when not using the value part in the selector, it will target elements both with and without, but as you can see the with last CSS rule, where the value part is used, it won't.
Stack snippet (here I used it on all, but you can of course keep :disabled for the input's)
input:not([disabled]) {
background: #ffff00;
}
input[disabled] {
background: #dddddd;
}
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
div[disabled='disabled'] {
color: red;
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled>
should be transparent, but doesn't have red colored text
</div>
<div disabled='disabled'>
this will both be transparent and have red colored text
</div>
For a div element you should use div[disabled="disabled"] or div[disabled]
its not an input element where you can apply :disabled
You can use div[disabled="disabled"] to select disabled div.
See Below Example :
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div:disabled {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<input disabled/>should be transparent
And aslo See this :
I would try:
*:disabled, *[disabled]{ /* ... */}
Example
*:disabled,
*[disabled] {
background: #000;
}
<input type="text" value="foo" disabled />
<input type="text" value="bar" />
A field has a placeholder :
<input type="text" name="clt_cin_pass" id="clt_cin_pass" maxlength="25" placeholder="CIN/Passeport" value="foo" />
How to place the placeholder's text , here CIN/Passeport, at the field's right ?
I have created a jsFiddle for you pheromix,
https://jsfiddle.net/69sp620q/1/
Html
<input type="text" name="clt_cin_pass" id="clt_cin_pass" maxlength="25" placeholder="CIN/Passeport" />
CSS
input[type='text']{
text-align:right;
}
Of course you can update this to target a class not just all input tags
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
<input type="text" name="clt_cin_pass" id="clt_cin_pass" maxlength="25" placeholder="CIN/Passeport" value="" />
I'm trying to create a log in form and my html so far is:
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
I want to style it using CSS. How can I access:
a) the overall form to change the overall style
b) the email address title and box
c) the button
I have tried using . # > but confused myself now. It's probably a really silly mistake I'm making but I can't figure it out...
Here's how can you access:
a) the overall form to change the overall style
Use #loginform {/* CSS rules */} to address the overall style of the form container. Since there's no other element except the form, it will work as if you were targeting the form itself.
b) the email address title and box
use #loginform label {/* CSS rules */} to target the CSS rules at the label and #email{} to target the email input box. You can re-use this last rule for the other items by adding their IDs (e.g. #email, #password {/* CSS rules */})
c) the button
Use input[type=submit] {/* CSS rules */} to style the submit button.
I solved like this
CSS
<style type="text/css">
form{
text-align: center; /* To align the form center */
background-color: orange; /* sets the background-color to orange */
}
#password{ /* If you use class attribute, use .password{} */
/* to modify this section*/
}
#email{
width: 200px; /* to size the email bar*/
}
#submit_button{
color: #fff; /* Text Color*/
background-color: #5cb85c; /* Background color green*/
border-color: #4cae4c; /* border color light green*/
}
</style>
HTML
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<br /><br /><br />
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<br /><br /><br />
<label>
<span> </span>
<input id="submit_button" type="submit" value="Send" />
</label> <br /><br /><br />
</form>
</div>
</div>
Or instead you can use "class" or "id" to the form,label and input field to provide them individual style.
Wrapping the label around the input is one way to do things (and it is technically valid), the other way is to use the for attribute. The later is typically considered more acceptable to some because it avoids the need for the extra span.
<form id="loginform" action="" method="post">
<div class="input">
<label for="username">Username</label>
<input type="text" name="username" id="username" />
</div>
<div class="input">
<label for="password">Passowrd</label>
<input type="password" name="password" id="password" />
</div>
<input type="submit" value="Log On" class="btn" />
</form>
Would then be styled like:
.input > label:after /* To place style/content after the label */
{
content: ':';
}
.input > label /* To target the label */
{
display:block; /* Puts the label above the input, just an example */
}
.input > input /* The input. */
{
background: yellow; /* for instance */
}
.input /* The whole input and label pair */
{
margin-bottom: 3px; /* Add space bellow each input, or whatever */
}
Otherwise, nesting the input inside the label removes the need for the for attribute on the label element, and id on input element. So, if we use your HTML:
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
We could style it like this:
#login > label
{
/* Style for input pair */
margin-bottom: 3px;
}
#login label > span
{
/* Style for the label text */
display:block;
}
#login > label > input
{
/* Style for the input itself. */
background: yellow;
}
Since you're just starting out and just want to see it working, maybe it would be simpler for you to attach an 'id' attribute to each html element, and then access them in your css that way (for the specifics you want to edit, e.g. email title, email input, submit button).
For example:
html
<input id="submitBtn" type="submit" value="Send" />
css
#submitBtn{ color:black }
If this doesnt work,
1.) Clear you cache
2.) Make sure your css file is actually included in your html
3.) Make sure each "ID" on the page attached to an element is unique
if that doesnt work, use your dev tools and fiddle around:
hit (f12) in any browser
First of all I recommend you changing the structure of your code to:
...
<form id="login" name="login" action="" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label for="email">Email Address:</label>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
<label for="password">Password:</label>
<input id="password" type="password" name="password" placeholder="Password" />
<input type="submit" value="Send" />
</form>
And then the answers are:
a) access to the form
form#login{
...
}
b) the email address title and box
label[for=email]{
}
input[type=email]{
}
c) access the button
input[type=sbumit]{
...
}
How do I get this form to get formatted like the css. I created the form class called database and then named the classes in the form database as well, but no changes took place. Does adding css to a form that uses js, make a difference in the way it is styled?
<style type="text/css">
.database-label{
width:150px !important;
}
.database-label-left{
width:150px !important;
}
.database-line{
padding-top:1px;
padding-bottom:1px;
}
.database-label-right{
width:150px !important;
}
.database-all{
width:690px;
background:transparent;
color:#555555 !important;
font-family:'Lucida Grande';
font-size:14px;
}
.database-radio-item label, .database-checkbox-item label, .database-grading-label, .database-header{
color:#555555;
}
.database-label-top
{
display:none !important;
}
.database-textbox
{
width: 500px !important;
height:40px !important;
}
.database-save-button
{
width: 500px !important;
height:40px !important;
position:relative !important;
left:-151px !important;
}
.database-all input,select {
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;
width: 140px;
}
.database-dropdown
{
width: 500px !important;
height:40px !important;
}
</style>
<form id="database" name="database" class="database">
<label>School</label>
<select id="schoolList" name="schoolList" onchange="schoolChange()">
<option value="null">Select a School</option>
</select>
<br />
<label>Edit/Add a New Merchant</label><br />
<span id="categoryNum">0</span>
<select id="merchantCategoryList" name="merchantCategoryList" onchange="merchantCategoryChange()">
<option value=null>New Category</option>
</select>
<span id="newCategory">
<input id="newCategoryName" type="text" placeholder="Enter the name of the New Category." size="45" />
</span>
<br />
<span id="merchantNum">0</span>
<select id="merchantList" name="merchantList" onchange="merchantChange()">
<option value="null">New Merchant</option>
</select>
<span id="newMerchant">
<input id="newMerchantName" type="text" placeholder="Enter the name of the New Merchant." size="45" />
</span>
<br />
<div id="merchantInfo">
<label>Phone Number:</label>
<input id="phone" type="text" placeholder="Phone Number" size="45" />
<br />
<label>Address:</label>
<input id="address" type="text" placeholder="Address" size="45" />
<br />
<label>City:</label>
<input id="city" type="text" placeholder="City" size="45" />
<br />
<label>State:</label>
<input id="state" type="text" placeholder="State" size="45" />
<br />
<label>Zip:</label>
<input id="zip" type="text" placeholder="Zip Code" size="45" />
<br />
<label>Hours:</label>
<input id="hours" type="text" placeholder="Hours" size="45" />
<br />
</div>
<input id="Save" type="button" value="Save" onclick="save();" />
</form>
You haven't assigned any classes to the elements, other than the form itself.
So you can target the elements within that form, by:
form.database label{}
etc.
By your form class name you have to write your css selection like this for styling element :
.database > label { /*for styling label }
.database > span{ /*for styling span}
.database > input{ /*for styling all input type}
.database > input[type="text"]{ /*for styling input with type text}
.database > input[type="button"]{ /*for styling input with type button}
Thats all from me. Good luck
Add classes to elements e.g. for save button use class=".database-save-button"
Else declare css classes like
#Save
{
width: 500px !important;
height:40px !important;
position:relative !important;
left:-151px !important;
}
I want to create a html5 input that looks like the iOS enter Pin (on the lock screen).... with 4 input boxes.
How do i achieve this?
I tried the following:
1) Created a normal input box.
2) Removed its borders.
3) Placed the above image as the background of the input box.
4) And added some letter spacing.
Problem is: As i type the first 3 characters, it fits in the boxes:
But when i type the 4th character, the characters move towards the left and hence it appears as below:
What can I do to fix this ?
Any other better approach ??
EDIT:
Ok based on the below answers, I modified the approach to have 4 input boxes. And on keyup event for each input box, I change the focus to next input box.
This works well on browser. But does not work on the device (iPhone 5). What is the problem ?
It is a Sencha Touch app packaged using Cordova.
SOLVED:
Need to disable <preference name="KeyboardDisplayRequiresUserAction" value="false" />
Instead of images, have 4 input boxes. Fiddle here: http://jsfiddle.net/JLyn9/2/
<input type="password" maxlength=1 id="1" onkeyup="moveOnMax(this,'a')" />
<input type="password" maxlength=1 id="a" onkeyup="moveOnMax(this,'b')" />
<input type="password" maxlength=1 id="b" onkeyup="moveOnMax(this,'c')" />
<input type="password" maxlength=1 id="c" />
moveOnMax =function (field, nextFieldID) {
if (field.value.length == 1) {
document.getElementById(nextFieldID).focus();
}
}
PS the JS function can be optimized.
EDIT/WARNING: This is not a solution to this problem. Please look at the other answers
Instead of using background-image for this purpose, use four input boxes with their type set to password, and than use jQuery to achieve some more user friendliness, if you don't need that functionality of auto focusing to next field you can simply omit the script out and achieve your style..
Demo
input[type=password] {
padding: 10px;
border: 1px solid #ddd;
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
}
jQuery (Optional for auto focus functionality)
$("input").keyup(function() {
if($(this).val().length >= 1) {
var input_flds = $(this).closest('form').find(':input');
input_flds.eq(input_flds.index(this) + 1).focus();
}
});
No need for jQuery, much cleaner IMO.
HTML
<form id="ios">
<input type="password" maxlength="1" />
<input type="password" maxlength="1"/>
<input type="password" maxlength="1"/>
<input type="password" maxlength="1"/>
</form>
CSS
form#ios input[type=password]{
height: 50px;
width: 40px;
text-align: center;
font-size: 2em;
border: 1px solid #000;
}
Demo
http://jsfiddle.net/jerryhuangme/e9yhr/
To keep the style clean,
I would suggest you to create 4 input boxes.
Write a small script to focus the next input box when user enters character in the current input box.
$("input[name*=pin]").keyup(function(e) {
if($(this).val().length == 1) {
$(this).attr('type', 'password');
var input_fields = $(this).closest('form').find('input[name*=pin]');
input_fields.eq(input_fields.index(this) + 1).focus();
}
if (e.keyCode==8 && e.currentTarget.name !== 'pin01') {
$(this).attr('type', 'number');
var input_fields = $(this).closest('form').find('input[name*=pin]');
input_fields.eq( input_fields.index(this) - 1 ).attr('type', 'number').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" class="form-pin">
<input type="number" maxlength="1" name="pin01" class="input-pin" pattern="\d*" />
<input type="number" maxlength="1" name="pin02" class="input-pin" pattern="\d*" />
<input type="number" maxlength="1" name="pin03" class="input-pin" pattern="\d*" />
<input type="number" maxlength="1" name="pin04" class="input-pin" pattern="\d*" />
</form>
<input type="tel" maxlength="1" tabindex="1" class="display-otp-box" data-key="otp1">
<input type="tel" maxlength="1" tabindex="2" class="display-otp-box" data-key="otp2">
<input type="tel" maxlength="1" tabindex="3" class="display-otp-box" data-key="otp3">
<input type="tel" maxlength="1" tabindex="4" class="display-otp-box" data-key="otp4">
$('.display-otp-box').on('keyup', function (e) {
var key = event.keyCode || event.charCode;
/* for backspace, focus will move to the previous box */
if( key === 8 || key === 46 ){
$(this).prev('input').focus();
return;
}
$(this).next('input').focus();
});
type="tel" on the input will make sure the numeric keypad appears when using on the phone
next input will be focused automatically with the help of tabindex.
I have seen all the answers but none solves the issue when backspace is clicked,
to tackle that here is my solution,
HTML:
<input class="input" type="text" id="input-1" maxlength=1 data-id="1" />
<input class="input" type="text" id="input-2" maxlength=1 data-id="2" />
<input class="input" type="text" id="input-3" maxlength=1 data-id="3" />
<input class="input" type="text" id="input-4" maxlength=1 data-id="4" />
CSS:
.input {
padding: 0.8rem;
border: 1px solid #ddd;
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
margin-left: 1rem;
}
Javascript:
const loginInputs = document.querySelectorAll(".input");
loginInputs.forEach((el) => {
el.addEventListener("keyup", (e) => {
const id = +e.target.dataset.id;
if (e.key === "Backspace") {
if (id === 1) return;
const prevEl = document.getElementById(`input-${id - 1}`);
prevEl.focus();
} else {
if (id === 4) return;
const nextEl = document.getElementById(`input-${id + 1}`);
nextEl.focus();
}
});
});