Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript
- Article en version PDF (pour la postérité) : Custom Style All Your Form Elements with Pure CSS and No javascript (PDF).
- Code source HTML/CSS : pure-css-custom-form-elements (zip)
Styler l’élément HTML Select avec CSS
(Works in IE8+, FF, Webkit)
|
1 2 3 4 5 6 7 |
<div class="styled"> <select> <option>Explorer</option> <option>Firefox</option> <option>Webkit</option> </select> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
div.styled { overflow:hidden; /* this hides the select's drop button */ padding:0; margin:0; background: white url(formelements-select.png) no-repeat bottom right; /* this is the new drop button, in image form */ width:12em; border-radius:2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); border: solid 1px #ccc; } div.styled select { width:115% /* this percentage effectively extends the drop down button out of view */; background-color:transparent /* this hides the select's background making any styling visible from the div */; background-image:none; -webkit-appearance: none /* this is required for Webkit browsers */; border:none; box-shadow:none; padding:0.3em 0.5em; /* padding should be added to the select, not the div */ } |
Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret
|
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 |
.sexy-select{ position: relative; display: block; overflow: hidden; padding: 0; margin: 0; background: #fff; &:after{ content: ""; position: absolute; right: 8px; top: calc(50% - 2px); // 2px = hauteur du caret/2 pointer-events: none; .caret; } .form-control{ width: calc(100% + 30px); background-color: transparent; background-image: none; -webkit-appearance: none; border: none; box-shadow: none; padding-right: 36px; } &.is-light{ .museo-variant(700); border-bottom: 1px solid #ddd; .form-control{ color: @brand-primary; } } } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .sexy-select{ padding-right: 24px; .form-control{ padding-right: 26px; } } } /* IE 10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .sexy-select{ .form-control{ width: 200%; } } } |