/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ SELECT \* ˍˍˍˍˍˍˍˍˍ */ .fr-select { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border-radius: 0.25rem 0.25rem 0 0; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 2.5rem 0.5rem 1rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) 50%; background-size: 1rem 1rem; color: var(--text-default-grey); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); box-shadow: inset 0 -2px 0 0 var(--border-plain-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); /** * Mixin pour gérer l'état disabled */ /** * On applique un style lorsque la valeur est automatiquement remplie par le navigateur * sur les navigateurs webkit. */ /** * Mixin pour gérer l'état disabled */ /** * On applique un style lorsque la valeur est automatiquement remplie par le navigateur * sur les navigateurs webkit. */ } .fr-select-group { position: relative; } .fr-select-group .fr-message:first-child { margin-top: 1rem; } .fr-select-group--valid::before, .fr-select-group--error::before, .fr-select-group--info::before { content: ""; display: block; pointer-events: none; position: absolute; top: 0; right: -0.75rem; bottom: 0; left: -0.75rem; background-repeat: no-repeat; background-position: 0 0; background-size: 0.125rem 100%; } :root[data-fr-theme=dark] .fr-select { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-fieldset--valid .fr-select, .fr-select-group--valid .fr-select { box-shadow: inset 0 -2px 0 0 var(--border-plain-success); } .fr-fieldset--error .fr-select, .fr-select-group--error .fr-select { box-shadow: inset 0 -2px 0 0 var(--border-plain-error); } .fr-select-group--error::before { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-select-group--valid::before { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-select-group--info::before { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)); } .fr-select:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-select:disabled { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-select:-webkit-autofill, .fr-select:-webkit-autofill:hover, .fr-select:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 0 var(--border-plain-grey), inset 0 0 0 1000px var(--background-contrast-blue-france); -webkit-text-fill-color: var(--text-label-grey); } @media (min-width: 36em) { /*! media sm */ /*! media sm */ } @media (min-width: 48em) { /*! media md */ /*! media md */ } @media (min-width: 62em) { /*! media lg */ /*! media lg */ } @media (min-width: 78em) { /*! media xl */ /*! media xl */ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /** * Cache l'icone native du select sur IE */ .fr-select::-ms-expand { display: none; } .fr-select { color: #3a3a3a; background-color: #eee; box-shadow: inset 0 -2px 0 0 #3a3a3a; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cpath fill='%23161616' d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/%3E%3C/svg%3E"); } .fr-fieldset--valid .fr-select, .fr-select-group--valid .fr-select { box-shadow: inset 0 -2px 0 0 #18753c; } .fr-fieldset--error .fr-select, .fr-select-group--error .fr-select { box-shadow: inset 0 -2px 0 0 #ce0500; } .fr-select-group--error::before { background-image: linear-gradient(0deg, #ce0500, #ce0500); } .fr-select-group--valid::before { background-image: linear-gradient(0deg, #18753c, #18753c); } .fr-select-group--info::before { background-image: linear-gradient(0deg, #0063cb, #0063cb); } .fr-select:disabled { color: #929292; box-shadow: inset 0 -2px 0 0 #e5e5e5; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cpath fill='%23929292' d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/%3E%3C/svg%3E"); } .fr-select:-webkit-autofill, .fr-select:-webkit-autofill:hover, .fr-select:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 0 #3a3a3a, inset 0 0 0 1000px #ececfe; -webkit-text-fill-color: #161616; } } @media print { .fr-select { color: #3a3a3a; background-color: #eee; box-shadow: inset 0 -2px 0 0 #3a3a3a; /** * Mixin pour gérer l'état disabled */ /** * On applique un style lorsque la valeur est automatiquement remplie par le navigateur * sur les navigateurs webkit. */ } .fr-fieldset--valid .fr-select, .fr-select-group--valid .fr-select { box-shadow: inset 0 -2px 0 0 #18753c; } .fr-fieldset--error .fr-select, .fr-select-group--error .fr-select { box-shadow: inset 0 -2px 0 0 #ce0500; } .fr-select-group--error::before { background-image: linear-gradient(0deg, #ce0500, #ce0500); } .fr-select-group--valid::before { background-image: linear-gradient(0deg, #18753c, #18753c); } .fr-select-group--info::before { background-image: linear-gradient(0deg, #0063cb, #0063cb); } .fr-select:disabled { color: #929292; box-shadow: inset 0 -2px 0 0 #e5e5e5; } .fr-select:-webkit-autofill, .fr-select:-webkit-autofill:hover, .fr-select:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 0 #3a3a3a, inset 0 0 0 1000px #ececfe; -webkit-text-fill-color: #161616; } } @media print and (-ms-high-contrast: none), print and (-ms-high-contrast: active) { .fr-select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cpath fill='%23161616' d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/%3E%3C/svg%3E"); } .fr-select:disabled { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cpath fill='%23929292' d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/%3E%3C/svg%3E"); } }