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

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

Bonjour,

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

Quand même à première vu le css suivant est la cause
[css]
input {
position: absolute;
left: -9999px;
}
[/css]


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

@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;
}

Bonjour,

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

[css]@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;
}[/css]

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