：之后和：之前不能在Firefox的无线电输入中工作

Question

我遇到了Mozilla Firefox的问题，我使用了一个伪元素来创建一个两者之间有一条线的单选按钮。

以下是完整的源代码：

＆＃13;

＆＃13;

var img = document.getElementById("example");
console.log(img.getAttribute("src")); // "images/foo.png"
console.log(img.src);                 // "http://example.com/path/images/foo.png"

＆＃13;

/* 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;
  }
}

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/ar557477/

在谷歌浏览器中，它就像一个魅力！但在Firefox中这是一场灾难！

在Firefox上：

在Google Chrome上：

Answer 1

在这种情况下，不正确的行为似乎是Chrome。伪元素添加在元素内部，input元素不允许包含任何内容。您在IE中获得的结果与在Firefox中获得的结果相同。

因此，实现所需结果的最佳方法是将伪元素移动到包含元素。

• 将td.registerS2 input.registerS2:after更改为td.registerS2:after
• 在right: -36px;
上将right: 0;更改为td.registerS2:after
• 将position: relative;添加到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>