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="" />
Related
<input type="text">
For example the text that user writes as his email in an input. Is there anyway at all?
this is a simple example :
input[type=email]:focus {
background-color: lightblue;
}
<label for="email">Enter your email:</label>
<input type="email" id="email"
pattern=".+#globex.com" size="30" required>
You can style the content of the input box like any other HTML element:
input{
color:teal;
font: 20px Arial, sans-serif;
}
Another thing you can add is the placeholder attribute like this:
<input type="text" class="mytext" placeholder='Thats some really nice placeholder!' />
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" />
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]{
...
}
For some reason I cant get CSS to work with my form? I have tried just about everything and I cant seem to find the issue? What am I doing wrong?
My HTML Structure
<div class="login-container">
<form>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email" class="input" id="email" />
<br /><br />
<label for="pword">Password:</label>
<input type="text" name="pword" id="pword" />
</fieldset>
</form>
</div>
My CSS Structure
.login-container fieldset {
padding: 1em;
}
.login-container label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
.input {
background-color:#F00;
}
Remove the . in front of your input selector.
input {
background-color:#F00;
}
See also: CSS element selector vs. CSS .class selector
Seems to work just fine, please see jsfiddle.net/4FCgc/
What is not working? Maybe it is your web browser's cache... But I doubt that.
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