Cseréljük le a gyári beállításokat!
Sok építő oldal form lehetőségei vizuális téren csak a mezőkre terjed ki, a radio és check megjelenés felesleges humbugda. Én szeretem ezeket az elemeket is kimaxolni, ha lehet. És ha már itt tartok, fontos, hogy Elementort használok oldal építésre, így az alábbi kódfejtegetés azoknak a legjobb segítség, akik ugyanebben a cipellőben járnak. Persze némi módosítással minden eszközre rászabható.
Első nekifutásra egy kis segítség, az alábbi kóddal tudsz a Code Snippets szerkesztőjébe CSS-t illeszteni.
add_action( 'wp_head', function () { ?>
<style>
/* Ide jön majd a CSS rész */
</style>
<?php } );Elsőre a gyári megjelenést tüntessük el …
input[type="checkbox"], input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}A rádió gomb stílusának beállítása …
Előre meghatározott színeket használok az egységesség miatt, így az alább látható var(–e-global-color-secondary) érték a saját színre cserélendő.
/* Radio button */
.elementor-field-type-radio > div label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 0.5em;
border-radius: 100%;
vertical-align: -3px;
border: 1px solid #fff; /* a gomb keretének alap színe */
padding: 0.13em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
}
.elementor-field-type-radio > div label {
margin-right: 1em;
}
.elementor-field-type-radio > div input:hover + label:before {
border-color: var(--e-global-color-secondary);
}
.elementor-field-type-radio > div input:checked + label:before {
background-color: var(--e-global-color-secondary);
border-color: var(--e-global-color-secondary);
}A választó gomb stílusának beállítása …
/* Checkbox */
.elementor-field-type-acceptance > div label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 0.5em;
vertical-align: -3px;
border: 1px solid #fff;
padding: 0.12em;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
border-radius: 3px;
}
.elementor-field-type-acceptance > div label {
margin-right: 1em;
position: relative;
}
.elementor-field-type-acceptance > div label:after {
border-right: 2px solid #fff;
border-top: 2px solid #fff;
content: "";
height: 11px;
left: 4px;
position: absolute;
top: 7px;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
width: 6px;
display: none;
}
.elementor-field-type-acceptance > div input:hover + label:before {
border-color: var(--e-global-color-secondary);
}
.elementor-field-type-acceptance > div input:checked + label:before {
border-color: var(--e-global-color-secondary);
background: var(--e-global-color-secondary);
}
.elementor-field-type-acceptance > div input:checked + label:after {
-moz-animation: check 0.8s ease 0s running;
-webkit-animation: check 0.8s ease 0s running;
animation: check 0.8s ease 0s running;
display: block;
width: 6px;
height: 11px;
border-color: #fff;
}A választó gomb „animációjának” beállítása …
@keyframes check {
0% {
height: 0;
width: 0;
}
25% {
height: 0;
width: 6px;
}
50% {
height: 11px;
width: 6px;
}
}És tádáááám, a bűvésztrükk végéhez értünk. Remélem olyan lett a végeredmény, amilyennek lennie kell. Ha érdekel egyéb megoldás, vagy ezzel a kóddal kapcsolatban lenne kérdés, kukkants vissza, vagy kérdezz … és legyél jó mosópor és ne habozz …
