Related
I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
This works (puts the smiley after "buu!" and before "some more")
<span class="mystyle">buuu!</span>a some more
This does not work - it only colors someValue in red, but there is no smiley.
<input class="mystyle" type="text" value="someValue">
What am I doing wrong? should I use another pseudo-selector?
Note: I cannot add a span around my input, because it is being generated by a third-party control.
:before and :after render inside a container
and <input> can not contain other elements.
Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they're not supported. A button on the other hand that's also a form element supports them, because it's a container of other sub-elements.
If you ask me, if some browser does display these two pseudo-elements on non-container elements, it's a bug and a non-standard conformance. Specification directly talks about element content...
W3C specification
If we carefully read the specification it actually says that they are inserted inside a containing element:
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
See? an element's document tree content. As I understand it this means within a container.
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
However if using jquery you can use
$(".mystyle").after("add your smiley here");
API docs on .after
To append your content with javascript. This will work across all browsers.
Oddly, it works with some types of input.
At least in Chrome,
<input type="checkbox" />
works fine, same as
<input type="radio" />
It's just type=text and some others that don't work.
Here's another approach (assuming you have control of the HTML): add an empty <span></span> right after the input, and target that in CSS using input.mystyle + span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to <input> form elements, and to the form, but not to the <label>.
:before and :after are applied inside a container, which means you can use it for elements with an end tag.
It doesn't apply for self-closing elements.
On a side note, elements which are self-closing (such as img/hr/input) are also known as 'Replaced Elements', as they are replaced with their respective content. "External Objects" for the lack of a better term. A better read here
I used the background-image to create the red dot for required fields.
input[type="text"][required] {
background-image: radial-gradient(red 15%, transparent 16%);
background-size: 1em 1em;
background-position: top right;
background-repeat: no-repeat
}
View on Codepen
The biggest misunderstanding here is the meaning of the words before and after. They do not refer to the element itself, but to the content in the element. So element:before is before the content, and element:after is after the content, but both are still inside the original element.
The input element has no content in the CSS view, and so has no :before or :after pseudo content. This is true of many other void or replaced elements.
There is no pseudo element referring to outside the element.
In a different universe, these pseudo elements might have been called something else to make this distinction clearer. And someone might even have proposed a pseudo element which is genuinely outside the element. So far, this is not the case in this universe.
Pseudo elements like :after, :before are only for container elements. Elements starting and closing in a single place like <input/>, <img> etc are not container elements and hence pseudo elements are not supported. Once you apply a pseudo element to container element like <div> and if you inspect the code(see the image) you can understand what I mean. Actually the pseudo element is created inside the container element. This is not possible in case of <input> or <img>
You can't put a pseudo element in an input element, but can put in shadow element, like a placeholder!
input[type="text"] {
&::-webkit-input-placeholder {
&:before {
// your code
}
}
}
To make it work in other browsers, use :-moz-placeholder, ::-moz-placeholder and :-ms-input-placeholder in different selectors. Can't group the selectors, because if a browser doesn't recognize the selector invalidates the entire statement.
UPDATE: The above code works only with CSS pre-processor (SASS, LESS...), without pre-processors use:
input[type="text"]::-webkit-input-placeholder:before { // your code }
A working solution in pure CSS:
The trick is to suppose there's a dom element after the text-field.
/*
* The trick is here:
* this selector says "take the first dom element after
* the input text (+) and set its before content to the
* value (:before).
*/
input#myTextField + *:before {
content: "👍";
}
<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
There's maybe something after a input-text
Does'nt matter what it is (*), I use it.
-->
<span></span>
(*) Limited solution, though:
you have to hope that there's a following dom element,
you have to hope no other input field follows your input field.
But in most cases, we know our code so this solution seems efficient and 100% CSS and 0% jQuery.
I found this post as I was having the same issue, this was the solution that worked for me. As opposed to replacing the input's value just remove it and absolutely position a span behind it that is the same size, the span can have a :before pseudo class applied to it with the icon font of your choice.
<style type="text/css">
form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>
<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
According to a note in the CSS 2.1 spec, the specification “does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” Although input is not really a replaced element any more, the basic situation has not changed: the effect of :before and :after on it in unspecified and generally has no effect.
The solution is to find a different approach to the problem you are trying to address this way. Putting generated content into a text input control would be very misleading: to the user, it would appear to be part of the initial value in the control, but it cannot be modified – so it would appear to be something forced at the start of the control, but yet it would not be submitted as part of form data.
As others explained, inputs are kinda-replaced void elements, so most browsers won't allow you to generate ::before nor ::after pseudo-elements in them.
However, the CSS Working Group is considering explicitly allowing ::before and ::after in case the input has appearance: none.
From https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari and Chrome both allow pseudo-elements on their form inputs.
Other browsers don't. We looked into removing this, but the
use-counter is recording ~.07% of pages using it, which is 20x our max
removal threshold.
Actually specifying pseudo-elements on inputs would require specifying
the internal structure of inputs at least somewhat, which we haven't
managed to do yet (and I'm not confident we *can* do). But Boris
suggested, in one of the bugthreads, allowing it on appearance:none
inputs - basically just turning them into <div>s, rather than
"kinda-replaced" elements.
You have to have some kind of wrapper around the input to use a before or after pseudo-element. Here's a fiddle that has a before on the wrapper div of an input and then places the before inside the input - or at least it looks like it. Obviously, this is a work around but effective in a pinch and lends itself to being responsive. You can easily make this an after if you need to put some other content.
Working Fiddle
Dollar sign inside an input as a pseudo-element: http://jsfiddle.net/kapunahele/ose4r8uj/1/
The HTML:
<div class="test">
<input type="text"></input>
</div>
The CSS:
input {
margin: 3em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
width:20%;
}
.test {
position: relative;
background-color: #dedede;
display: inline;
}
.test:before {
content: '$';
position: absolute;
top: 0;
left: 40px;
z-index: 1;
}
try next:
label[for="userName"] {
position: relative;
}
label[for="userName"]::after {
content: '[after]';
width: 22px;
height: 22px;
display: inline-block;
position: absolute;
right: -30px;
}
<label for="userName">
Name:
<input type="text" name="userName" id="userName">
</label>
The question mentions "input field". Although I believe the OP was referring to input field with type=text, ::after and ::before pseudocontent does render for several different types of input fields:
input::before {
content: "My content" /* 11 different input types will render this */
}
Here is a comprehensive demo of all input types, clearly showing which ones are compatible with (in this case) the ::before pseudoelement.
To summarize, this is a list of all of the input types that can render pseudocontent:
checkbox
color
date
datetime-local
file
image
month
radio
range
time
week
If you are trying to style an input element with :before and :after, odds are you are trying to mimic the effects of other span, div, or even a elements in your CSS stack.
As Robert Koritnik's answer points out, :before and :after can only be applied to container elements and input elements are not containers.
HOWEVER, HTML 5 introduced the button element which is a container and behaves like an input[type="submit|reset"] element.
<style>
.happy:after { content:url(smiley.gif); }
</style>
<form>
<!-- won't work -->
<input class="happy" type="submit" value="Submit" />
<!-- works -->
<button class="happy">Submit</button>
</form>
:before and :after only works for nodes that can have child nodes since they insert a new node as the first or last node.
I found that you can do it like this:
.submit .btn input
{
padding:11px 28px 12px 14px;
background:#004990;
border:none;
color:#fff;
}
.submit .btn
{
border:none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size:1em;
min-width:96px;
display:inline-block;
position:relative;
}
.submit .btn:after
{
content:">";
width:6px;
height:17px;
position:absolute;
right:36px;
color:#fff;
top:7px;
}
<div class="submit">
<div class="btn">
<input value="Send" type="submit" />
</div>
</div>
You need to have a div parent that takes the padding and the :after.
The first parent needs to be relative and the second div should be absolute so you can set the position of the after.
Summary
It does not work with <input type="button">, but it works fine with <input type="checkbox">.
Fiddle: http://jsfiddle.net/gb2wY/50/
HTML:
<p class="submit">
<input id="submit-button" type="submit" value="Post">
<br><br>
<input id="submit-cb" type="checkbox" checked>
</p>
CSS:
#submit-button::before,
#submit-cb::before {
content: ' ';
background: transparent;
border: 3px solid crimson;
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
margin: -3px -3px;
}
While the explanations that point out that the Firefox behavior of not allowing ::after and ::before content for elements that can't display any content are quite correct, it still seems to work perfectly fine with this rule:
input[type=checkbox] {
-moz-appearance: initial;
}
As ::after is the only way to restyle a checkbox or radiobox without introducing more and unrelated markup like a trailing span or label, I think it's fine to force Firefox to allow ::before and ::after content to be displayed, despite not being to spec.
Example of switcher with after and before
just wrap your input on div block
.fm-form-control {
position: relative;
margin-top: 25px;
margin-bottom: 25.2px;
}
.fm-switcher {
display: none;
}
.fm-switcher:checked + .fm-placeholder-switcher:after {
background-color: #94c6e7;
}
.fm-switcher:checked + .fm-placeholder-switcher:before {
left: 24px;
}
.fm-switcher[disabled] + .fm-placeholder-switcher {
cursor: not-allowed;
}
.fm-switcher[disabled] + .fm-placeholder-switcher:before {
background-color: #cbd0d3;
}
.fm-switcher[disabled] + .fm-placeholder-switcher:after {
background-color: #eaeded;
border-color: #cbd0d3;
}
.fm-placeholder-switcher {
padding-left: 53px;
cursor: pointer;
line-height: 24px;
}
.fm-placeholder-switcher:before {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: 2px;
background-color: #2980b9;
z-index: 2;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
border-radius: 12px;
}
.fm-placeholder-switcher:after {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 48px;
height: 20px;
margin-top: -12px;
background-color: #ffffff;
z-index: 1;
border-radius: 12px;
border: 2px solid #bdc3c7;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
<div class='fm-form-control'>
<input class='fm-switcher' id='switcher_id' type='checkbox'>
<label class='fm-placeholder-switcher' for='switcher_id'>
Switcher
</label>
</div>
I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
This works (puts the smiley after "buu!" and before "some more")
<span class="mystyle">buuu!</span>a some more
This does not work - it only colors someValue in red, but there is no smiley.
<input class="mystyle" type="text" value="someValue">
What am I doing wrong? should I use another pseudo-selector?
Note: I cannot add a span around my input, because it is being generated by a third-party control.
:before and :after render inside a container
and <input> can not contain other elements.
Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they're not supported. A button on the other hand that's also a form element supports them, because it's a container of other sub-elements.
If you ask me, if some browser does display these two pseudo-elements on non-container elements, it's a bug and a non-standard conformance. Specification directly talks about element content...
W3C specification
If we carefully read the specification it actually says that they are inserted inside a containing element:
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
See? an element's document tree content. As I understand it this means within a container.
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
However if using jquery you can use
$(".mystyle").after("add your smiley here");
API docs on .after
To append your content with javascript. This will work across all browsers.
Oddly, it works with some types of input.
At least in Chrome,
<input type="checkbox" />
works fine, same as
<input type="radio" />
It's just type=text and some others that don't work.
Here's another approach (assuming you have control of the HTML): add an empty <span></span> right after the input, and target that in CSS using input.mystyle + span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to <input> form elements, and to the form, but not to the <label>.
:before and :after are applied inside a container, which means you can use it for elements with an end tag.
It doesn't apply for self-closing elements.
On a side note, elements which are self-closing (such as img/hr/input) are also known as 'Replaced Elements', as they are replaced with their respective content. "External Objects" for the lack of a better term. A better read here
I used the background-image to create the red dot for required fields.
input[type="text"][required] {
background-image: radial-gradient(red 15%, transparent 16%);
background-size: 1em 1em;
background-position: top right;
background-repeat: no-repeat
}
View on Codepen
The biggest misunderstanding here is the meaning of the words before and after. They do not refer to the element itself, but to the content in the element. So element:before is before the content, and element:after is after the content, but both are still inside the original element.
The input element has no content in the CSS view, and so has no :before or :after pseudo content. This is true of many other void or replaced elements.
There is no pseudo element referring to outside the element.
In a different universe, these pseudo elements might have been called something else to make this distinction clearer. And someone might even have proposed a pseudo element which is genuinely outside the element. So far, this is not the case in this universe.
Pseudo elements like :after, :before are only for container elements. Elements starting and closing in a single place like <input/>, <img> etc are not container elements and hence pseudo elements are not supported. Once you apply a pseudo element to container element like <div> and if you inspect the code(see the image) you can understand what I mean. Actually the pseudo element is created inside the container element. This is not possible in case of <input> or <img>
You can't put a pseudo element in an input element, but can put in shadow element, like a placeholder!
input[type="text"] {
&::-webkit-input-placeholder {
&:before {
// your code
}
}
}
To make it work in other browsers, use :-moz-placeholder, ::-moz-placeholder and :-ms-input-placeholder in different selectors. Can't group the selectors, because if a browser doesn't recognize the selector invalidates the entire statement.
UPDATE: The above code works only with CSS pre-processor (SASS, LESS...), without pre-processors use:
input[type="text"]::-webkit-input-placeholder:before { // your code }
A working solution in pure CSS:
The trick is to suppose there's a dom element after the text-field.
/*
* The trick is here:
* this selector says "take the first dom element after
* the input text (+) and set its before content to the
* value (:before).
*/
input#myTextField + *:before {
content: "👍";
}
<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
There's maybe something after a input-text
Does'nt matter what it is (*), I use it.
-->
<span></span>
(*) Limited solution, though:
you have to hope that there's a following dom element,
you have to hope no other input field follows your input field.
But in most cases, we know our code so this solution seems efficient and 100% CSS and 0% jQuery.
I found this post as I was having the same issue, this was the solution that worked for me. As opposed to replacing the input's value just remove it and absolutely position a span behind it that is the same size, the span can have a :before pseudo class applied to it with the icon font of your choice.
<style type="text/css">
form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>
<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
According to a note in the CSS 2.1 spec, the specification “does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” Although input is not really a replaced element any more, the basic situation has not changed: the effect of :before and :after on it in unspecified and generally has no effect.
The solution is to find a different approach to the problem you are trying to address this way. Putting generated content into a text input control would be very misleading: to the user, it would appear to be part of the initial value in the control, but it cannot be modified – so it would appear to be something forced at the start of the control, but yet it would not be submitted as part of form data.
As others explained, inputs are kinda-replaced void elements, so most browsers won't allow you to generate ::before nor ::after pseudo-elements in them.
However, the CSS Working Group is considering explicitly allowing ::before and ::after in case the input has appearance: none.
From https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari and Chrome both allow pseudo-elements on their form inputs.
Other browsers don't. We looked into removing this, but the
use-counter is recording ~.07% of pages using it, which is 20x our max
removal threshold.
Actually specifying pseudo-elements on inputs would require specifying
the internal structure of inputs at least somewhat, which we haven't
managed to do yet (and I'm not confident we *can* do). But Boris
suggested, in one of the bugthreads, allowing it on appearance:none
inputs - basically just turning them into <div>s, rather than
"kinda-replaced" elements.
You have to have some kind of wrapper around the input to use a before or after pseudo-element. Here's a fiddle that has a before on the wrapper div of an input and then places the before inside the input - or at least it looks like it. Obviously, this is a work around but effective in a pinch and lends itself to being responsive. You can easily make this an after if you need to put some other content.
Working Fiddle
Dollar sign inside an input as a pseudo-element: http://jsfiddle.net/kapunahele/ose4r8uj/1/
The HTML:
<div class="test">
<input type="text"></input>
</div>
The CSS:
input {
margin: 3em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
width:20%;
}
.test {
position: relative;
background-color: #dedede;
display: inline;
}
.test:before {
content: '$';
position: absolute;
top: 0;
left: 40px;
z-index: 1;
}
try next:
label[for="userName"] {
position: relative;
}
label[for="userName"]::after {
content: '[after]';
width: 22px;
height: 22px;
display: inline-block;
position: absolute;
right: -30px;
}
<label for="userName">
Name:
<input type="text" name="userName" id="userName">
</label>
The question mentions "input field". Although I believe the OP was referring to input field with type=text, ::after and ::before pseudocontent does render for several different types of input fields:
input::before {
content: "My content" /* 11 different input types will render this */
}
Here is a comprehensive demo of all input types, clearly showing which ones are compatible with (in this case) the ::before pseudoelement.
To summarize, this is a list of all of the input types that can render pseudocontent:
checkbox
color
date
datetime-local
file
image
month
radio
range
time
week
If you are trying to style an input element with :before and :after, odds are you are trying to mimic the effects of other span, div, or even a elements in your CSS stack.
As Robert Koritnik's answer points out, :before and :after can only be applied to container elements and input elements are not containers.
HOWEVER, HTML 5 introduced the button element which is a container and behaves like an input[type="submit|reset"] element.
<style>
.happy:after { content:url(smiley.gif); }
</style>
<form>
<!-- won't work -->
<input class="happy" type="submit" value="Submit" />
<!-- works -->
<button class="happy">Submit</button>
</form>
:before and :after only works for nodes that can have child nodes since they insert a new node as the first or last node.
I found that you can do it like this:
.submit .btn input
{
padding:11px 28px 12px 14px;
background:#004990;
border:none;
color:#fff;
}
.submit .btn
{
border:none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size:1em;
min-width:96px;
display:inline-block;
position:relative;
}
.submit .btn:after
{
content:">";
width:6px;
height:17px;
position:absolute;
right:36px;
color:#fff;
top:7px;
}
<div class="submit">
<div class="btn">
<input value="Send" type="submit" />
</div>
</div>
You need to have a div parent that takes the padding and the :after.
The first parent needs to be relative and the second div should be absolute so you can set the position of the after.
Summary
It does not work with <input type="button">, but it works fine with <input type="checkbox">.
Fiddle: http://jsfiddle.net/gb2wY/50/
HTML:
<p class="submit">
<input id="submit-button" type="submit" value="Post">
<br><br>
<input id="submit-cb" type="checkbox" checked>
</p>
CSS:
#submit-button::before,
#submit-cb::before {
content: ' ';
background: transparent;
border: 3px solid crimson;
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
margin: -3px -3px;
}
While the explanations that point out that the Firefox behavior of not allowing ::after and ::before content for elements that can't display any content are quite correct, it still seems to work perfectly fine with this rule:
input[type=checkbox] {
-moz-appearance: initial;
}
As ::after is the only way to restyle a checkbox or radiobox without introducing more and unrelated markup like a trailing span or label, I think it's fine to force Firefox to allow ::before and ::after content to be displayed, despite not being to spec.
Example of switcher with after and before
just wrap your input on div block
.fm-form-control {
position: relative;
margin-top: 25px;
margin-bottom: 25.2px;
}
.fm-switcher {
display: none;
}
.fm-switcher:checked + .fm-placeholder-switcher:after {
background-color: #94c6e7;
}
.fm-switcher:checked + .fm-placeholder-switcher:before {
left: 24px;
}
.fm-switcher[disabled] + .fm-placeholder-switcher {
cursor: not-allowed;
}
.fm-switcher[disabled] + .fm-placeholder-switcher:before {
background-color: #cbd0d3;
}
.fm-switcher[disabled] + .fm-placeholder-switcher:after {
background-color: #eaeded;
border-color: #cbd0d3;
}
.fm-placeholder-switcher {
padding-left: 53px;
cursor: pointer;
line-height: 24px;
}
.fm-placeholder-switcher:before {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: 2px;
background-color: #2980b9;
z-index: 2;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
border-radius: 12px;
}
.fm-placeholder-switcher:after {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 48px;
height: 20px;
margin-top: -12px;
background-color: #ffffff;
z-index: 1;
border-radius: 12px;
border: 2px solid #bdc3c7;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
<div class='fm-form-control'>
<input class='fm-switcher' id='switcher_id' type='checkbox'>
<label class='fm-placeholder-switcher' for='switcher_id'>
Switcher
</label>
</div>
I'm looking for a CSS only Answer, I can solve with Javascript/Jquery but I'm attempting to solve without.
IN short, I have to Radio buttons, I would like one div to be displayed if the first one is selected and a Second div if the second one is selected.
I have Created a jsfiddle with a simplified version of myProblem
https://jsfiddle.net/lukehammer/x7yw432d/5/ I can not get it to work in the JS fiddle or my code.
<label>
<input id="Type1" name="UserType" type="radio" value="Contractor">
Contractor
</label>
<label>
<input id="Type2" name="UserType" type="radio" value="Managment">
Managment
</label>
<div class = "hideAtStart" id = "contractorDisplay">
Show me I'm a contractor.
</div>
<div class = "hideAtStart" id = "ManagerDisplay">
Show me I'm a managerr.
</div>
CSS
.hideAtStart {
display: none;
}
#Type1:checked ~ #contractorDisplay{
display : block;
}
#Type2:checked ~ #ManagerDisplay{
display : block;
}
Question
How can I show a div when a radio button is pressed ?
**Bonus Points **
BounS Points if the Transition can fade in/out.
Layout
Set each radio before a div (fieldset in this demo)
On each radio:
Assign a unique #id
Assign an identical [name]
Next make 2 labels with the attribute [for] and set each attribute's value to an #id of a radio. The [for] attribute of the labels are synced to the radio with the same #id so that when the label is clicked so is the radio.
Place these labels anywhere you want on the page.
To make things easier assign a class that will group alike tags together.
Style
Hide the radios and the div that sits after each radio by setting display:none
Make the following ruleset (remember step 5 of Layout)
.radio:checked + .classOfDiv { display:block }
CSS rulesets are read backwards by the browser:
Any element that has the className of .classOfDiv that has a sibling element that is placed before (in code it's more like above or to the left) it and that sibling (older brother?) has the className of .radio and happens to be checked as well...set that .classOfDiv display property to block.
The + is called an Adjacent Sibling Combinator which is the key to this ruleset. See the References located after the Demo for more details.
Demo
.rad,
.set {
display: none;
opacity: 0;
}
.rad:checked+.set {
display: block;
opacity: 1;
}
.btn {
display: inline-block;
border: 2px inset grey;
border-radius: 6px;
padding: 2px 3px;
cursor: pointer
}
.btn:hover {
border-color: tomato;
color: tomato;
transition: .75s ease;
}
legend {
font-size: 1.5em
}
<form id='main'>
<fieldset>
<legend>SWITCH</legend>
<label for='rad0' class='btn'>OPEN SET 0</label>
<label for='rad1' class='btn'>OPEN SET 1</label>
</fieldset>
<input id='rad0' class='rad' name='rad' type='radio'>
<fieldset class='set'>
<legend>SET 0</legend>
</fieldset>
<input id='rad1' class='rad' name='rad' type='radio'>
<fieldset class='set'>
<legend>SET 1</legend>
</fieldset>
</form>
References
Adjacent Sibling Combinator
for Attribute
I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
This works (puts the smiley after "buu!" and before "some more")
<span class="mystyle">buuu!</span>a some more
This does not work - it only colors someValue in red, but there is no smiley.
<input class="mystyle" type="text" value="someValue">
What am I doing wrong? should I use another pseudo-selector?
Note: I cannot add a span around my input, because it is being generated by a third-party control.
:before and :after render inside a container
and <input> can not contain other elements.
Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they're not supported. A button on the other hand that's also a form element supports them, because it's a container of other sub-elements.
If you ask me, if some browser does display these two pseudo-elements on non-container elements, it's a bug and a non-standard conformance. Specification directly talks about element content...
W3C specification
If we carefully read the specification it actually says that they are inserted inside a containing element:
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
See? an element's document tree content. As I understand it this means within a container.
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
However if using jquery you can use
$(".mystyle").after("add your smiley here");
API docs on .after
To append your content with javascript. This will work across all browsers.
Oddly, it works with some types of input.
At least in Chrome,
<input type="checkbox" />
works fine, same as
<input type="radio" />
It's just type=text and some others that don't work.
Here's another approach (assuming you have control of the HTML): add an empty <span></span> right after the input, and target that in CSS using input.mystyle + span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to <input> form elements, and to the form, but not to the <label>.
:before and :after are applied inside a container, which means you can use it for elements with an end tag.
It doesn't apply for self-closing elements.
On a side note, elements which are self-closing (such as img/hr/input) are also known as 'Replaced Elements', as they are replaced with their respective content. "External Objects" for the lack of a better term. A better read here
I used the background-image to create the red dot for required fields.
input[type="text"][required] {
background-image: radial-gradient(red 15%, transparent 16%);
background-size: 1em 1em;
background-position: top right;
background-repeat: no-repeat
}
View on Codepen
The biggest misunderstanding here is the meaning of the words before and after. They do not refer to the element itself, but to the content in the element. So element:before is before the content, and element:after is after the content, but both are still inside the original element.
The input element has no content in the CSS view, and so has no :before or :after pseudo content. This is true of many other void or replaced elements.
There is no pseudo element referring to outside the element.
In a different universe, these pseudo elements might have been called something else to make this distinction clearer. And someone might even have proposed a pseudo element which is genuinely outside the element. So far, this is not the case in this universe.
Pseudo elements like :after, :before are only for container elements. Elements starting and closing in a single place like <input/>, <img> etc are not container elements and hence pseudo elements are not supported. Once you apply a pseudo element to container element like <div> and if you inspect the code(see the image) you can understand what I mean. Actually the pseudo element is created inside the container element. This is not possible in case of <input> or <img>
You can't put a pseudo element in an input element, but can put in shadow element, like a placeholder!
input[type="text"] {
&::-webkit-input-placeholder {
&:before {
// your code
}
}
}
To make it work in other browsers, use :-moz-placeholder, ::-moz-placeholder and :-ms-input-placeholder in different selectors. Can't group the selectors, because if a browser doesn't recognize the selector invalidates the entire statement.
UPDATE: The above code works only with CSS pre-processor (SASS, LESS...), without pre-processors use:
input[type="text"]::-webkit-input-placeholder:before { // your code }
A working solution in pure CSS:
The trick is to suppose there's a dom element after the text-field.
/*
* The trick is here:
* this selector says "take the first dom element after
* the input text (+) and set its before content to the
* value (:before).
*/
input#myTextField + *:before {
content: "👍";
}
<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
There's maybe something after a input-text
Does'nt matter what it is (*), I use it.
-->
<span></span>
(*) Limited solution, though:
you have to hope that there's a following dom element,
you have to hope no other input field follows your input field.
But in most cases, we know our code so this solution seems efficient and 100% CSS and 0% jQuery.
I found this post as I was having the same issue, this was the solution that worked for me. As opposed to replacing the input's value just remove it and absolutely position a span behind it that is the same size, the span can have a :before pseudo class applied to it with the icon font of your choice.
<style type="text/css">
form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>
<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
According to a note in the CSS 2.1 spec, the specification “does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” Although input is not really a replaced element any more, the basic situation has not changed: the effect of :before and :after on it in unspecified and generally has no effect.
The solution is to find a different approach to the problem you are trying to address this way. Putting generated content into a text input control would be very misleading: to the user, it would appear to be part of the initial value in the control, but it cannot be modified – so it would appear to be something forced at the start of the control, but yet it would not be submitted as part of form data.
As others explained, inputs are kinda-replaced void elements, so most browsers won't allow you to generate ::before nor ::after pseudo-elements in them.
However, the CSS Working Group is considering explicitly allowing ::before and ::after in case the input has appearance: none.
From https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,
Safari and Chrome both allow pseudo-elements on their form inputs.
Other browsers don't. We looked into removing this, but the
use-counter is recording ~.07% of pages using it, which is 20x our max
removal threshold.
Actually specifying pseudo-elements on inputs would require specifying
the internal structure of inputs at least somewhat, which we haven't
managed to do yet (and I'm not confident we *can* do). But Boris
suggested, in one of the bugthreads, allowing it on appearance:none
inputs - basically just turning them into <div>s, rather than
"kinda-replaced" elements.
You have to have some kind of wrapper around the input to use a before or after pseudo-element. Here's a fiddle that has a before on the wrapper div of an input and then places the before inside the input - or at least it looks like it. Obviously, this is a work around but effective in a pinch and lends itself to being responsive. You can easily make this an after if you need to put some other content.
Working Fiddle
Dollar sign inside an input as a pseudo-element: http://jsfiddle.net/kapunahele/ose4r8uj/1/
The HTML:
<div class="test">
<input type="text"></input>
</div>
The CSS:
input {
margin: 3em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
width:20%;
}
.test {
position: relative;
background-color: #dedede;
display: inline;
}
.test:before {
content: '$';
position: absolute;
top: 0;
left: 40px;
z-index: 1;
}
try next:
label[for="userName"] {
position: relative;
}
label[for="userName"]::after {
content: '[after]';
width: 22px;
height: 22px;
display: inline-block;
position: absolute;
right: -30px;
}
<label for="userName">
Name:
<input type="text" name="userName" id="userName">
</label>
The question mentions "input field". Although I believe the OP was referring to input field with type=text, ::after and ::before pseudocontent does render for several different types of input fields:
input::before {
content: "My content" /* 11 different input types will render this */
}
Here is a comprehensive demo of all input types, clearly showing which ones are compatible with (in this case) the ::before pseudoelement.
To summarize, this is a list of all of the input types that can render pseudocontent:
checkbox
color
date
datetime-local
file
image
month
radio
range
time
week
If you are trying to style an input element with :before and :after, odds are you are trying to mimic the effects of other span, div, or even a elements in your CSS stack.
As Robert Koritnik's answer points out, :before and :after can only be applied to container elements and input elements are not containers.
HOWEVER, HTML 5 introduced the button element which is a container and behaves like an input[type="submit|reset"] element.
<style>
.happy:after { content:url(smiley.gif); }
</style>
<form>
<!-- won't work -->
<input class="happy" type="submit" value="Submit" />
<!-- works -->
<button class="happy">Submit</button>
</form>
:before and :after only works for nodes that can have child nodes since they insert a new node as the first or last node.
I found that you can do it like this:
.submit .btn input
{
padding:11px 28px 12px 14px;
background:#004990;
border:none;
color:#fff;
}
.submit .btn
{
border:none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size:1em;
min-width:96px;
display:inline-block;
position:relative;
}
.submit .btn:after
{
content:">";
width:6px;
height:17px;
position:absolute;
right:36px;
color:#fff;
top:7px;
}
<div class="submit">
<div class="btn">
<input value="Send" type="submit" />
</div>
</div>
You need to have a div parent that takes the padding and the :after.
The first parent needs to be relative and the second div should be absolute so you can set the position of the after.
Summary
It does not work with <input type="button">, but it works fine with <input type="checkbox">.
Fiddle: http://jsfiddle.net/gb2wY/50/
HTML:
<p class="submit">
<input id="submit-button" type="submit" value="Post">
<br><br>
<input id="submit-cb" type="checkbox" checked>
</p>
CSS:
#submit-button::before,
#submit-cb::before {
content: ' ';
background: transparent;
border: 3px solid crimson;
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
margin: -3px -3px;
}
While the explanations that point out that the Firefox behavior of not allowing ::after and ::before content for elements that can't display any content are quite correct, it still seems to work perfectly fine with this rule:
input[type=checkbox] {
-moz-appearance: initial;
}
As ::after is the only way to restyle a checkbox or radiobox without introducing more and unrelated markup like a trailing span or label, I think it's fine to force Firefox to allow ::before and ::after content to be displayed, despite not being to spec.
Example of switcher with after and before
just wrap your input on div block
.fm-form-control {
position: relative;
margin-top: 25px;
margin-bottom: 25.2px;
}
.fm-switcher {
display: none;
}
.fm-switcher:checked + .fm-placeholder-switcher:after {
background-color: #94c6e7;
}
.fm-switcher:checked + .fm-placeholder-switcher:before {
left: 24px;
}
.fm-switcher[disabled] + .fm-placeholder-switcher {
cursor: not-allowed;
}
.fm-switcher[disabled] + .fm-placeholder-switcher:before {
background-color: #cbd0d3;
}
.fm-switcher[disabled] + .fm-placeholder-switcher:after {
background-color: #eaeded;
border-color: #cbd0d3;
}
.fm-placeholder-switcher {
padding-left: 53px;
cursor: pointer;
line-height: 24px;
}
.fm-placeholder-switcher:before {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: 2px;
background-color: #2980b9;
z-index: 2;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
border-radius: 12px;
}
.fm-placeholder-switcher:after {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 48px;
height: 20px;
margin-top: -12px;
background-color: #ffffff;
z-index: 1;
border-radius: 12px;
border: 2px solid #bdc3c7;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
<div class='fm-form-control'>
<input class='fm-switcher' id='switcher_id' type='checkbox'>
<label class='fm-placeholder-switcher' for='switcher_id'>
Switcher
</label>
</div>
Wondering whether if there is a css-only way to perform to toggle styles on the corresponding label on input's focus.
So far I have:
$(document).on('focus active', 'input',function(){
$('label[for='+$(this).attr('id')+']').addClass('active');
});
$(document).on('blur', 'input',function(){
$('label[for='+$(this).attr('id')+']').removeClass('active');
});
HTML:
<div class="row">
<label for="contact_form_mail">Email</label>
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
</div>
And CSS:
.active{ color:red; }
Edit: I am surely aware of the child and sibling selectors "workarounds", but rearranging clean markup for the pure sake of styling seems not right, so if there is another pure css way this answer wins!
http://jsfiddle.net/fchWj/3/
Try this way:- Place your label after input and float it left. And apply siblings.
Html
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>
CSS
label {
float:left;
}
input:focus + label {
color:red;
}
Demo
This is a hack to get the adjacent sibling selector work as it applies only on the following element and not the preceding one. ~ will select all the adjascent siblings after this element. So if you are having different .row for each section of inputs then use +.
If you are willing to switch elements, than here you go
Demo
<div>
<input type="text" />
<label for="e_mail">E-Mail</label>
</div>
label {
float: left;
margin-right: 5px;
}
input[type=text]:focus + label {
color: red;
}
Explanation: We are using + adjacent selector here, so when the textbox is focused, we select the label tag and apply color red
Note: Don't forget to clear floats ;)
It's possible with CSS only, without switching the order of the label and input. You can use a :focus-within CSS pseudo-class on the parent element, which applies to elements, that has a child element with the focus.
In your example, you could use the following:
.row:focus-within label {
color: red;
}
Note, that this pseudo-class is relatively new, so only modern browsers support it.
There is, but only if you place the label after the input.
<input name="field" type="text" />
<label for="field">Label Here</label>
input:focus + label{
color: red;
}
Now if you want the label to be placed before it, then you need to do some css styling with position absolute to place the label before the input field, then add some margin left on the input to move it to the right.
<div>
<input name="field" type="text" />
<label for="field">Label Here</label>
</div>
div{
position: relative;
}
input{
margin-left: 40px;
}
label{
position:absolute;
left:0;
}
This give you label on top of input, highlight label while input focus.
HTML
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>
<code>
.row{
display:flex;
flex-direction:column-reverse;
align-self:flex-start;
}
.row input:focus{
border: 1px solid red;
}
.row input:focus+label{
color:red;
}
</code>
First we can use a selector that matches a label immediately followed by the input tag (input:focus + label). But there is still the problem, that the label follows after the actual input field. If one would like to have it above the text input we need to switch the positions of the controls. This can be done with a CSS pseudo-table.
<div class="pseudo-table">
<input id="yourname" name="yourname" type="text" placeholder="Name...">
<label for="yourname">Name</label>
</div>
The style for the artifical table is...
.pseudo-table { display: table; }
With this in place we could transform the label e.g. to a table-header-group:
label { display: table-header-group; }
and the input field to a table-row-group:
input { display: table-row-group; }
In combination with our followed by selector we're done and it looks right:
input:focus + label {
color:red;
font-weight: bold;
}
For a demo please see this Fiddle
HTH
There is no selector to match a preceding element...
This matches a label immediately followed by an input tag.
input:focus + label {
color: red;
}