Par défaut, les formulaires ne sont pas très jolis surtout du point de vue des graphistes.
Pourtant, le graphiste ne peut pas faire à sa guise car il y a des limites du point de vue de l’intégration html.
Dès lors, nous front end développeur on a tenté beaucoup d’expérimentation pour égayer tous cela.
La solution JavaScript parait la plus tendance mais avec l’évolution du CSS3, il a pris le relais étant donné qu’il est plus accessible que le JavaScript et vu que on ne peut ignorer l’accessibilité
Styliser le select
Dans cette article, on va étudier comment ajouter une flèche personnalisé sur le select.
Pour cela, il suffit d’utiliser la propriété CSS3 de transformation pour donner une rotation à 90° sur l’élément (la flèche) et après jouer avec les pseudo classes after et before.
Et enfin, un point important ne pas oublier d’utiliser la propriété CSS : pointer-events: none;
Ça vous paraîtra compliquer, mais voyons ensemble le code CSS et html pour mieux comprendre le principe.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<label> <select> <option selected> Select Box </option> <option>test Option</option> <option>test Option</option> </select> </label> /* The CSS */ select { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ @media screen and (-webkit-min-device-pixel-ratio:0) { select {padding-right:18px} } label {position:relative} label:after { content:'>'; font:11px "Consolas", monospace; color:#aaa; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:8px; top:2px; padding:0 0 2px; border-bottom:1px solid #ddd; position:absolute; pointer-events:none; } label:before { content:''; right:6px; top:0px; width:20px; height:20px; background:#f8f8f8; position:absolute; pointer-events:none; display:block; } |
Styliser un checkbox ( ou un radio button )
Le code Html est assez simple.
Il s suffit de bien faire correspondre l’id de l’input checkbox à l’attribut ‘for‘ du label.
|
1 2 3 4 5 |
<div class="tag">Checkbox Small</div> <input class="regular-checkbox" id="checkbox-1-1" type="checkbox" /> <label for="checkbox-1-1"></label> <input class="regular-checkbox" id="checkbox-1-2" type="checkbox" /> <label for="checkbox-1-2"></label> |
La structure est là mais sans le CSS il y aura pas de changement car tous se joue dans le css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.regular-checkbox { display: none; } .regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative; } .regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .regular-checkbox:checked + label { background-color: #e9ecee; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); color: #99a1a7; } .regular-checkbox:checked + label:after { content: '\2714'; font-size: 14px; position: absolute; top: 0px; left: 3px; color: #99a1a7; } |
Le code \2714 permet d’afficher le “check”. Le sélecteur adjacent (+) correspond à tout élément Y immédiatement précédé par un élément X. Techniquement le css va cacher les inputs , et va styliser le label avec l’attribut :after.
Vous remarquerez que le code pour styliser l’input radio et le checkbox est quasiment identique, à vous maintenant d’expérimenter, le code dans le codepen est assez évident.