Alvin FREY Alvin FREY - 1 month ago 5
CSS Question

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

I have a problem with Mozilla Firefox, I have used a pseudo element to create a radio button with line between the two.

Here is the complete source code:



/* 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 input.registerS2:after {
display: block;
content: " ";
position: absolute;
bottom: 11px;
background: #FFFCFA;
height: 3px;
width: 35px;
right: -36px;
}
td.registerS2:last-child input.registerS2:after {
display: none;
}
td.registerS2 {
padding-right: 34px;
}
/* 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/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<br/>

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





https://jsfiddle.net/ar557477/

In Google Chrome it works like a charm! But in Firefox it is a disaster!

On Firefox:

FIREFOX

On Google Chrome:

enter image description here

Answer

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>

Comments