pixel blog

Csini a formod

Ha unod már a gyári form elemeket és nem akarsz ezer és egy bővítményt a csinosításra.

Sok építő oldal form lehetőségei vizuális téren csak a mezőkre terjednek ki, a radio és check megjelenés felesleges humbugda. Persze némi csibecsőrködéssel minden kivitelezhető, lássuk a mikénteket.

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 …

Idézet
További bejegyzések
Pixart.hu - webdesign

Weboldal készítés

Ha érdekelnek a weboldal készítés leggyakoribb kérdései… Ha kiváncsi vagy, hogy milyen alapkövetelményeknek kell megfelelnie egy weboldalnak… Vagy akár fontosnak érzed, hogyan, milyen elvárásokkal érdemes webfejlesztőt választanod…

Pixart.hu - shopdesign

Woooooozás …

Már a sokadik webshop kialakításnál ismétkődnek a kérések: csinálja ezt, vagy ugorjon oda a shop miután ez meg az történik… 
Összeválogattam párat, amit a leggyakrabban kellett alkalmaznom…

Pixart.hu - grafikai tervezés

Csini a formod

Sok építő oldal form lehetőségei vizuális téren csak a mezőkre terjednek ki, a radio és check megjelenés felesleges humbugda. Persze némi csibecsőrködéssel minden kivitelezhető, lássuk a mikénteket.

Pixart.hu - Biztonsági protokoll

Karbantartás? Ugyan minek

Felesleges a weboldalak karbantartására bárkit is felkérni. Hisz nem igényel mást, mint a frissítés gombok nyomkodását, vagy esetleg mégsem?

Pixart.hu - webdesign

Kód a kódba …

A weboldalak fejlesztése során számtalanszor előfordult, hogy különféle kódrészleteket kell hozzáadni az éppen fejlesztett oldalhoz. Gugli a barátunk és telepítsünk fel mindent és mindenhová…