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>
Here is a website that has the effect I am looking for: https://wehaulmo.com/
The "Reach Out Today" link in each section is what I am specifically referring to here.
I am not certain if this is custom css that was used or if there is actually a widget that helps create this effect in Elementor. I can create this effect just using an index.html and a style.css with no problem, but again, I am trying to understand how to get this done in Elementor for WordPress sites.
I must be missing something here because this effect is quite standard and I cannot for the life of me find the widget/element in Elementor that can create this underline effect.
If anyone out there is an Elementor guru, your help would be much appreciated.
Thank you.
Anytime you need to do something front-ended in an Elementor page that can't be done with widgets, you can use a few ways to actually throw some css (and even JS) in there.
1 - HTML WIDGET (Works without Elementor Pro)
Insert the HTML widget where you would need your element to be. The HTML widget offers a textarea in the 'content' tab. In this text area, you can write HTML code, but you can also add CSS by using a <style></style> tag. Like this for example:
<p class="demo">Hello!</p>
<style>
.demo{
color: blue;
}
</style>
You can even add a <script></script> tag if you need some Javascript.
Also, every Elementor frontend widget has an 'advanced' tab in which you can find the 'advanced' section (First section of 'advanced' tab). In that section there are two fields labelled 'CSS ID' and 'CSS Class', which allow you to add an ID and/or a class to that element. You can then refer to that class or ID in your CSS and Javascript with a DOM.
2 - Custom CSS (Pro Only)
Every (almost every) widget in Elementor has a 'custom CSS' section under its 'advanced' tab. Keep in mind that you need Elementor Pro to access this section. You can write all the CSS you need in that section.
Also, in that text area, you can refer to the element you are editing without needing its classname or id, simply by using 'selector' as such:
selector{
margin: 0 auto;
}
Use "selector" to target wrapper element
3 - Plugins
There is a variety of plugins that are made specifically to add code to Elementor and other editors, with shortcodes or through other methods.
In your case
In your case, using the first way I described (HTML WIDGET), you would need to write something along the lines of this in your HTML Widget's textarea :
REACH OUT TODAY
<style>
.demo {
color: #f89c27;
font-size: 24px;
letter-spacing: 0.20em;
position: relative;
display: inline-block;
}
.demo:hover{
color: #f89c27;
}
.demo:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
position: absolute;
display: block;
height: 2px;
left: 50%;
background: #f89c27;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.demo:hover:after {
left: 0;
width: 100%;
}
</style>
Thanks to Shiverz for pointing me in the right direction here, it helped me out greatly. Thanks again man.
Here is the HTML and CSS code that worked for me:
/*** Styling Underline Hyperlink ***/
/* Creating Underline */
.underline.elementor-widget-heading .elementor-heading-title>a {
position: relative;
}
.underline.elementor-widget-heading .elementor-heading-title>a:after {
content: '';
width: 0%;
height: 2px;
background-color: #FAC074;
position: absolute;
bottom: -10px;
left: 50%;
transform: translatex(-50%);
-webkit-transition: width .4s;
transition: width .4s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.underline.elementor-widget-heading .elementor-heading-title>a:hover:after {
width: 90%;
-webkit-transition: width .4s;
transition: width .4s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
/** Creating Arrow **/
.underline.elementor-widget-heading .elementor-heading-title>a:before {
content: url(http://ronratzlaff.wpengine.com/wp-content/uploads/2020/09/icon-arrow-right.svg);
width: 1px;
height: 1px;
position: absolute;
bottom: 15px;
right: -12px;
}
<div class="elementor-element elementor-element-c3ae88a underline elementor-widget elementor-widget-heading" data-id="c3ae88a" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<div class="elementor-heading-title elementor-size-default">Reach Out Today</div>
</div>
</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 having trouble understanding the behavior of the CSS :after property. According to the spec (here and here):
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
This doesn't seem to place restrictions on which elements can have a :after (or :before) property. However, it seems to only work with specific elements... <p> works, <img> doesn't, <input> doesn't, <table> does. I'm could test more, but the point is made. Note that this seems pretty consistent across browsers. What determines whether an object can accept a :before and :after property?
img and input are both replaced elements.
A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.
:before and :after only work with non-replaced elements.
From the spec:
Note. This 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.
With span:before, span:after, the DOM looks like this:
<span><before></before>Content of span<after></after></span>
Evidently, that won't work with <img src="" />.
:before and :after are not required to work for replaced elements, and CSS specifications do not specify how they would work for them, and the concept of replaced element is somewhat vague.
The CSS 2.1 specification clearly suggests that they can work for replaced elements, just saying that it does not “fully define” how. This relates to the issue that a replaced element is expected to have its own visual rendering, which is not controlled by CSS, whereas the pseudo-elements should add something to the content of the element. The spec adds that this will be defined “in more detail” in a future specification, but this has not taken place so far.
Browser vendors just decided to avoid problems by not implementing these pseudo-elements for some elements at all.
It is not clear at all what “replaced element” means, and the meaning appears to have changed somewhat. It is often interpreted as meaning the same as empty element (an element with EMPTY declared content, i.e. an element that cannot have any content), but CSS 2.1 itself shows a sample style sheet with the selector br:before (though browsers have ignored this, implementing br their own way). It can be argued that more and more elements have moved into the scope of CSS rendering, at least in part. For example, an input element (incuding its font, colors, etc.) is largely controllable with CSS in modern browsers.
Current browsers (Firefox, IE, Chrome) do not seem to support the :after and :before pseudo-elements for empty elements other than hr. For hr, IE and Chrome place the generated content inside a bordered box, which is the implementation of hr; the content makes the box taller. Firefox places the content of both (!) pseudo-elements after the horizontal rule that is its implementation of hr. This variation illustrates the kinds of “interaction” problems that are referred to in CSS 2.1.
It is often claimed that these pseudo-elements cannot be used for empty elements since their HTML definitions do not allow any content. This is a category error. The syntax rules of a markup language do not restrict what you can do in CSS
To conclude, :after and :before are currently not usable for empty elements (except marginally for hr), but this is mainly due to implementations and may change in the future.
I've spent several hours plucking out my hair only to find that some other css override content (or display:none) property of my selector.
For example, if the following code is written in some other place, before or after element will never show:
#id > child:before {
content: none!important;
}
<html>
<div id="id" class="class">
<child>
Before element is not showing
</child>
</div>
<style>
child:before {
content: 'before';
color: 'red';
}
</style>
</html>
Just find the css which is overwriting your style and spam stronger selectors and !important to make it work
#id>child:before {
content: none!important;
}
<html>
<div id="id" class="class">
<child>
Before element is <strong>showing</strong>
</child>
</div>
<style>
#id.class>child:before {
content: 'before'!important;
border: 1px solid red;
}
</style>
</html>
<img> is a replaced element and using :before or :after pseudo-elements on it works if the image fails to load and otherwise it does not work. If you intend to have a fallback in case of image load failure, the following css useful:
img{
position: relative;
}
img:after{
position: absolute;
content: "Any allowed type of content including a fallback image";
left: 0;
}
For a good example, please refer to https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/
Elements that doesn't have closing tag are void elements and they can't display content inside them:
https://www.w3.org/TR/html5/syntax.html#void-elements
All Blink, Webkit and Quantum browsers allow you to create pseudo elements only on checkboxes but this is controversial since no spec allow this behavior.
Here an example:
https://codepen.io/equinusocio/pen/BOBaEM/
input[type="checkbox"] {
appearance: none;
color: #000;
width: 42px;
height: 24px;
border: 1px solid currentColor;
border-radius: 100px;
cursor: pointer;
transition: all 100ms;
background-size: 30%;
outline: none;
position: relative;
box-sizing: border-box;
background-color: #eee;
transition: background-color 200ms;
&::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: currentColor;
will-change: transform;
transition: transform 200ms cubic-bezier(.01,.65,.23,1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
&:checked {
background-color: aquamarine;
&::before {
transform: translateX(100%);
}
}
}
I've had a look around but can't quite find what i'm looking for.
I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.
Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/
As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.
I would rather use css if possible but happy with JQuery also.
I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.
Here is the css animation:
.info-slide {
position:absolute;
bottom:0;
float:left;
width:100%;
background:url(../images/blue-back.png);
height:60px;
cursor:pointer;
overflow:hidden;
text-align:center;
transition: height .4s ease-in-out;
-webkit-transition: height .4s ease-in-out;
-moz-transition: height .4s ease-in-out;
}
.info-slide:hover {
height:300px;
}
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.
.info-slide:hover, .info-slide:active{
height:300px;
}
You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine
You can add onclick="" to hovered element. Hover will work after that.
Edit: But you really shouldn't add anything style related to your markup, just posted it as an alternative.
document.addEventListener("touchstart", function() {}, true);
This snippet will enable hover effects for touchscreens
I got the same trouble, in mobile device with Microsoft's Edge browser. I can solve the problem with: aria-haspopup="true". It need to add to the div and the :hover, :active, :focus for the other mobile browsers.
Example html:
<div class="left_bar" aria-haspopup="true">
CSS:
.left_bar:hover, .left_bar:focus, .left_bar:active{
left: 0%;
}
On most devices, the other answers work. For me, to ensure it worked on every device (in react) I had to wrap it in an anchor tag <a> and add the following:
:hover, :focus, :active (in that order), as well as role="button" and tabIndex="0".
I am a CSS noob but I have noticed that hover will work for touch screens so long as it's a "hoverable" element: image, link, button. You can do it all with CSS using the following trick.
Change your div background to an actual image tag within the div or create a dummy link around the entire div, it will then register as a hover when you touch the image.
Doing this will mean that you need the rest of your page to also be "hoverable" so when you touch outside of the image it recognizes that info-slide:hover has ended. My trick is to make all of my other content dummy links.
It's not very elegant but it works.
A CSS only solution for those who are having trouble with mobile touchscreen button styling.
This will fix your hover-stick / active button problems.
body, html {
width: 600px;
}
p {
font-size: 20px;
}
button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}
button:active {
background: black;
color: white;
}
.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}
.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>
<button>Normal button</button>
<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>
<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures. With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely. This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>
<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>
Well I agree with above answers but still there can be an another way to do this and it is by using media queries.
Suppose this is what you want to do :
body.nontouch nav a:hover {
background: yellow;
}
then you can do this by media query as :
#media(hover: hover) and (pointer: fine) {
nav a:hover {
background: yellow;
}
}
And for more details you can visit this page.
I think this simple method can achieve this goal.
With CSS you can turn off pointer event to 'none' then use jQuery to switch classes.
.item{
pointer-events:none;
}
.item.clicked{
pointer-events:inherit;
}
.item:hover,.item:active{
/* Your Style On Hover Converted to Tap*/
background:#000;
}
Use jQuery to switch classed:
jQuery('.item').click(function(e){
e.preventDefault();
$(this).addClass('clicked')l
});