Forum d'entraide PHPFrance

Bonjour,

J'ai récupéré du code CSS pour habiller des checkbox en utilisant ceci :

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  color: #435757;
  background: radial-gradient(#fff, #dac4cd);
  font: 1.4em/1 'Noto Sans', sans-serif;
}

.container {
  position: absolute;
}

input {
  position: absolute;
  left: -9999px;
}

label {
  display: block;
  position: relative;
  margin: 0px;
  padding: 2px 2px 2px 30px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 10px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:first-of-type {
  transform: translateX(0px);
}

label:last-of-type {
  transform: translateX(0px);
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

Or, je me heurte à un problème !

J'ai aussi un bouton de type input='submit', mais je ne le vois pas..

Pas des plus aguerri en CSS, pourriez-vous m'indiquer comment faire pour que je puisse voire mon bouton ?
Modifier une partie du CSS, ou rajouter des informations de style dans le bouton, et si oui, lesquelles ?

Merci de votre aide ..

Stéphane

Bonjour,

Peux-tu nous donner le HTML lié à ce css ?

Quand même à première vu le css suivant est la cause

input {
  position: absolute;
  left: -9999px;
}

"left" permet de positionner ton élement à X pixels de ton bord gauche d'écran
Si la valeur donnée à left est positive on déplace de X pixels vers la droite
Si elle est négative on déplace de X pixels vers la gauche

"left:-9999px" signifie qu'il y a "9999 pixels" entre le bord gauche de ton écran et ton élément vers la gauche (donc en dehors de ton écran)

Bonsoir,

En effet, comme j'ai dit, je ne maîtrise que très peu les bases du css, et c'était bien cela..

Merci pour votre aide et votre concours..

Très bonne continuation..