styling radio buttons
This commit is contained in:
parent
30bae9d52f
commit
a12a3b95d9
29
resources/css/base/inputs.css
Normal file
29
resources/css/base/inputs.css
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
input[type='radio'] {
|
||||||
|
@apply border-2 border-neutral-800 rounded-full w-5 h-5 grid;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
font: inherit;
|
||||||
|
box-sizing: border-box; /* Assurez-vous que les dimensions incluent la bordure */
|
||||||
|
place-content: center;
|
||||||
|
transform: translateY(-1px); /* Ajustez avec un pixel entier */
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
@apply border-neutral-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio']::before {
|
||||||
|
content: '';
|
||||||
|
width: 10px; /* Taille adaptée sans valeurs fractionnées */
|
||||||
|
height: 10px; /* Taille adaptée sans valeurs fractionnées */
|
||||||
|
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||||
|
transform: scale(0);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
transition: 120ms transform ease-in-out;
|
||||||
|
box-shadow: inset 1em 1em #171717 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
transform: scale(1); /* Passez à une échelle entière */
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user