::Before with Input in Firefox

::before with input in Firefox

According to the specification.

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.

:before and :after should only work on the element which can act as a container of content. <input> cannot contain any content so it should not support those pseudo-elements. Chrome supports because it does not follow the spec (or bug?).

:before && :after pseudo elements not showing Firefox

You cannot use ::after and ::before on elements that cannot have content, such as <input /> or <img />.

::after and ::before work like this:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

They get inserted before and after the content of a DOM node. Since <input /> cannot have content, there's nowhere to put it.

Now let's check with a checkbox:

<input type="checkbox" />
<next-element>***content***</next-element>

Here, there cannot be ***content*** to surround with pseudo elements.

:after and :before don't work in radio input on Firefox

The incorrect behaviour in this case would appear to be Chrome. Pseudo elements are added inside the element and input elements are not allowed to contain any content. You get the same result in IE as you do in Firefox.

Because of this the best way of achieving your desired result would be to move the pseudo element to the containing element instead.

• Change td.registerS2 input.registerS2:after to td.registerS2:after
• Change right: -36px; to right: 0; on td.registerS2:after
• Add position: relative; to td.registerS2

/* IMPORTATION DES FONTS */
@font-face {  font-family: 'Open_Sans-Semi-Bold';  src: url("../fonts/Open_Sans/OpenSans-Bold.ttf");}@font-face {  font-family: 'Open_Sans-Regular';  src: url("../fonts/Open_Sans/OpenSans-Regular.ttf");}@font-face {  font-family: 'Open_Sans-Light';  src: url("../fonts/Open_Sans/OpenSans-Light.ttf");}@font-face {  font-family: 'Oleo_Script-Bold';  src: url("../fonts/Oleo_Script/OleoScript-Bold.ttf");}@font-face {  font-family: 'Oleo_Script-Regular';  src: url("../fonts/Oleo_Script/OleoScript-Regular.ttf");}/* MISE EN PLACE DES CONTAINERS */
body {  background-color: #7CCCD6 !important;  /* Pourra être supprimé lors du passage vers le projet commun */}/* Définition de la taille de base du container d'inscription */
.container-registerS2 {  width: 340px;}/* MISE EN PLACE DU CONTAINER PRINCIPAL */
.panel.registerS2 {  -webkit-border-radius: 20px;  -moz-border-radius: 20px;  border-radius: 20px;  -webkit-box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.45);  -moz-box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.45);  box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.45);  border: 0;}.panel-body.registerS2 {  padding-left: 3%;  padding-right: 3%;}/* Classe permettant de donner un design différent au header du panel (couleur etc...) */
.panel-heading.registerS2 {  margin-bottom: 0!important;  font-family: 'Open_Sans-Semi-Bold' !important;  -moz-border-radius: 0px;  -webkit-border-radius: 20px 20px 0px 0px;  border-radius: 20px 20px 0px 0px;  background-color: #BD9470;  height: 62px;  text-align: center;  color: white;  font-weight: bold;  font-size: 15px;}/* GESTION DES INPUT */
/* Container de chaque input qui permet d'accueillir leur input ainsi que leurs icônes */
.input-registerS2 {  width: 87%;  float: none;  margin: auto;  margin-bottom: 10px;}/* Form-control correspond à la classe présente dans toutes les input qui lui donne son design */
.form-control {  outline: 0;  height: 49px;  width: 310px;  border: solid 1px #BAB9B8;  -webkit-border-radius: 8px !important;  -moz-border-radius: 8px !important;  border-radius: 8px !important;  padding-left: 8%;  font-family: 'Open_Sans-Regular' !important;  font-size: 18px;  -webkit-appearance: none;}/* Gestion de la couleur des placeholder dans plusieurs navigateurs */
.form-control::-webkit-input-placeholder {  color: #BAB9B8;}.form-control:-moz-placeholder {  color: #BAB9B8;}.form-control::-moz-placeholder {  color: #BAB9B8;}.form-control:-ms-input-placeholder {  color: #BAB9B8;}/* Gestion de l'apparence des icones */
.icon.registerS2 {  color: #FFFCFA;}/* GESTION DES INPUT AVEC ICONES */
/* Container des input avec icônes */
.form-control-icon-registerS2 {  width: 87%;  float: none;  margin: 0 auto;  border-bottom-right-radius: 0px!important;  border-top-right-radius: 0px!important;  border-right: 0;}/* Container des icônes */
.input-group-addon.registerS2 {  width: 52px;  border-bottom-right-radius: 8px !important;  border-top-right-radius: 8px !important;  background-color: #BAB9B8;  border: solid 1px #96999B !important;}/* GESTION DE L'AFFICHAGE DE CERTAINS TEXTES */
p.required.registerS2 {  text-align: start;  color: #919191;  margin: 0;}p.center-block.registerS2 {  color: #919191;}p.step-text.registerS2 {  color: #FFFCFA;  font-family: Open_Sans-Semi-Bold;  font-size: 15px;  padding-bottom: 8px;}p.panel-content.registerS2 {  padding-top: 0.5em;  font-size: 125%;}/* GESTION DU CENTRAGE DES ELEMENTS EN BLOCK */
.center-block.registerS2 {  float: none;  margin: 0 auto;  text-align: center;}.center-table.registerS2 {  margin-left: auto;  margin-right: auto;}/* GESTION DU BOUTON (CHANGEMENT DES COULEURS + BORDURES) */
.btn.registerS2 {  background-color: #F7821E;  border: solid 2px #6D390D;}/* AFFICHAGE D'UN CURSEUR DIFFERENT SUR LE DATEPICKER */
#datepicker {  cursor: pointer;}/* GESTION DU TABLEAU CONTENANT LES BOUTONS AINSI QUE LA LIGNE */
td.registerS2 input.registerS2 {  position: relative;}td.registerS2:after {  display: block;  content: " ";  position: absolute;  bottom: 11px;  background: #FFFCFA;  height: 3px;  width: 35px;  right: 0;}td.registerS2:last-child input.registerS2:after {  display: none;}td.registerS2 {  padding-right: 34px;  position: relative;}/* GESTION DU DESIGN DU BOUTON RADIO */
input[type="radio"].registerS2 {  -webkit-appearance: none;  display: none;  background-color: #FFFCFA;  display: inline-block;  width: 24px;  height: 24px;  vertical-align: middle;  cursor: pointer;  -moz-border-radius: 50%;  border-radius: 50%;  border: solid 1px #BAB9B8;}input[type="radio"].registerS2:checked:before {  content: "";  display: block;  position: relative;  width: 10px;  height: 10px;  border-radius: 50%;  background: #7CCCD6;  margin: 6px;  border: solid 1px #BAB9B8;}input[type="radio"].registerS2:focus {  outline: none;}@media only screen and (max-width: 360px) {  .container-registerS2 {    width: 290px;  }  .form-control {    width: 260px;    padding-left: 8%;    font-family: 'Open_Sans-Regular' !important;    font-size: 15px;  }}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="center-block step-text registerS2"><b>Étape 2/2</b></p>
<table class="center-table registerS2">  <tbody>    <tr>      <td class="registerS2">        <input class="registerS2" name="step" id="step1" type="radio" disabled>      </td>      <td>        <input class="registerS2" name="step" id="step2" type="radio" checked>      </td>    </tr>  </tbody></table>
<br/>
<div class="row">  <div class="container-registerS2 center-block">    <div class="panel panel-default registerS2">      <div class="panel-heading registerS2">        <p class="panel-content registerS2">Informations personnelles</p>      </div>      <div class="panel-body registerS2">
        <div id="alert"></div>
        <br/>
        <div class="input-group input-registerS2 registerS2">          <p class="required registerS2">*champs requis</p>          <input type="text" class="form-control registerS2" placeholder="Prénom*" id="firstname" name="firstname">        </div>
        <div class="input-group input-registerS2 registerS2">          <input type="text" class="form-control registerS2" placeholder="Nom*" id="name" name="name">        </div>
        <div class="input-group input-registerS2 registerS2">          <input type="text" class="form-control form-control-icon-registerS2" placeholder="Date de naissance*" id="birthday" name="birthday" aria-describedby="datepicker">          <span class="input-group-addon registerS2" id="datepicker"><i                                    class="fa fa-calendar fa-2x icon registerS2" aria-hidden="true"></i></span>        </div>
        <div class="input-group input-registerS2 registerS2">          <input type="tel" class="form-control form-control-icon-registerS2" placeholder="N° de smartphone*" id="number" name="number" aria-describedby="phone">          <span class="input-group-addon registerS2" id="phone"><i                                    class="fa fa-mobile fa-2x icon registerS2" aria-hidden="true"></i></span>        </div>
        <div class="input-group input-registerS2 registerS2">          <input type="text" class="form-control registerS2" placeholder="Code de vérification" id="verification" name="verification">        </div>
        <br/>
        <button type="button" class="btn btn-warning btn-lg center-block registerS2">C'est parti !</button>
        <br/>
        <p class="center-block registerS2">Le n° de smartphone est nécessaire au paiement qui s'effectuera par mobile</p>
      </div>    </div>  </div></div>

Custom checkbox with CSS ::before - not working in Firefox/Edge

Sometimes with labels you can solve this type of problems

input[type="checkbox"] {  display: none;}
span {  visibility: visible;  content: "";  display: block;  width: 1.1em;  height: 1.1em;  color: #eddc23;  border: 1px solid #eddc23;  background-color: #540123;  border-radius: 35%;  line-height: 1.27;  text-align: center;  cursor: pointer;}
input[type="checkbox"]:checked + label span::before {  content: "\2713";}

<input type="checkbox" id="checkbox"><label for="checkbox">  <span></span></label>

Can I use a :before or :after pseudo-element on an input field?

: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.

CSS content generation before or after 'input' elements

With :before and :after you specify which content should be inserted before (or after) the content inside of that element. input elements have no content.

E.g. if you write <input type="text">Test</input> (which is wrong) the browser will correct this and put the text after the input element.

The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.

See the examples in the specification:

For example, the following document fragment and style sheet:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).

CSS before and after

Apparently the problem lies in the fact that pseudo elements need their element to have content, and an input element has no content.

I do not claim to understand this because Edge and Chrome will do what we probably expect and allow pseudo elements. There is discussion of this :before && :after pseudo elements not showing Firefox though some is rather out of date, the January 2020 answer from @kevinkatzke points us to the MDN documentation https://developer.mozilla.org/en-US/docs/Web/CSS/appearance on a workaround.

This is to put the -moz-appearance: initial;in your stylesheet. Try the snippet. It seems to work although there are warnings in the documentation that it's not a standard.

input[type=checkbox] {
  -moz-appearance:initial;
}
.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "\2605";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "\2606";
   position: absolute;
}

<input class="star" type="checkbox" title="bookmark page"><br/><br/>
<input class="star" type="checkbox" title="bookmark page" checked><br/><br/>

how to use input[type=range] CSS Pseudo-elements with firefox and IE

The pseudo selector you're after for the fill on FF is ::-moz-range-progress

---

Related Topics