Desiderate creare uno stile per i singoli campi dei vostri moduli, senza influenzare gli altri campi del modulo? Con il giusto selettore CSS, potete modificare lo stile di qualsiasi componente del modulo per adattarlo alle vostre esigenze.
Questo tutorial fornisce un elenco di selettori necessari per lo stile dei campi di pagamento in WPForms.
Nota: i passaggi di questo tutorial sono avanzati e richiedono una certa conoscenza dei CSS. Se preferite non utilizzare alcun codice, potete consultare la nostra guida sullo stile di WPForms nell'editor di blocchi.
Utilizzando gli snippet di codice qui sotto
Di seguito è riportato un elenco dei selettori CSS necessari per indirizzare specifici campi di fantasia con il codice CSS.
Abbiamo anche incluso gli stili predefiniti che WPForms applica automaticamente a questi selettori. Per personalizzare qualsiasi parte del vostro modulo, potete copiare uno snippet CSS da questo tutorial nel vostro sito e poi modificarlo come necessario.
Nota: Non sapete come aggiungere i CSS al vostro sito? Consultate il tutorial di WPBeginner sull'aggiunta di CSS personalizzati al vostro sito WordPress.
Nota: per saperne di più sull'uso del codice sottostante, si consiglia di consultare il nostro tutorial sulla personalizzazione dello stile dei campi standard e di altri elementi del modulo.
Campi di pagamento
Articolo singolo
Imbottitura di un singolo articolo
.wpforms-form .wpforms-field.wpforms-field-payment-single {
padding: 10px 0;
clear: both;
}
Etichetta per singolo articolo
.wpforms-form .wpforms-field.wpforms-field-payment-single .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Articoli multipli
Imbottitura di più elementi
.wpforms-form .wpforms-field.wpforms-field-payment-multiple {
padding: 10px 0;
clear: both;
}
Etichetta per articoli multipli
.wpforms-form .wpforms-field.wpforms-field-payment-multiple .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Elementi della casella di controllo
Imbottitura delle caselle di controllo
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox {
padding: 10px 0;
clear: both;
}
Etichetta delle voci della casella di controllo
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Etichette degli elementi delle caselle di controllo
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox ul li .wpforms-field-label-inline {
display: inline;
vertical-align: baseline;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
}
Elementi a discesa
Imbottitura degli elementi a discesa
.wpforms-form .wpforms-field.wpforms-field-payment-select {
padding: 10px 0;
clear: both;
}
Etichetta degli elementi a discesa
.wpforms-form .wpforms-field.wpforms-field-payment-select .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Carta di credito Stripe
Imbottitura della carta di credito Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card {
padding: 10px 0;
clear: both;
}
Etichetta per carta di credito Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Sottoetichette per carte di credito Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-sublabel {
display: block;
font-size: 13px;
float: none;
font-weight: 400;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Casella di immissione del numero di carta a strisce
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-stripe-credit-card-cardnumber {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 8px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Nome della striscia sulla casella di immissione della carta
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card input[type=text] {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Quadrato
Imbottitura quadrata
.wpforms-form .wpforms-field.wpforms-field-square {
padding: 10px 0;
clear: both;
}
Etichetta quadrata
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Sottoetichette quadrate
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-sublabel {
display: block;
font-size: 13px;
float: none;
font-weight: 400;
line-height: 1.3;
margin: 4px 0 0;
padding: 0;
}
Casella di immissione dei dettagli della carta quadrata
.wpforms-form .wpforms-field.wpforms-field-square .sq-card-component {
position: relative;
height: inherit;
width: 100%;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 2px;
}
Nome quadrato sulla casella di inserimento della scheda
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-square-cardname {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Authorize.Net
Imbottitura di Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net {
padding: 10px 0;
clear: both;
}
Etichetta Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Sottoetichette Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-sublabel {
display: block;
font-size: 13px;
float: none;
font-weight: 400;
line-height: 1.3;
margin: 4px 0 0;
padding: 0;
}
Casella di immissione del numero di carta Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-cardnumber {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Mese e anno della carta Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net select {
max-width: 100%;
text-transform: none;
white-space: nowrap;
}
Casella di immissione del codice di sicurezza di Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-code .wpforms-field-authorize_net-cardcvc {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Coupon
Imbottitura del coupon
.wpforms-form .wpforms-field.wpforms-field-payment-coupon {
padding: 10px 0;
clear: both;
}
Etichetta del coupon
.wpforms-form .wpforms-field.wpforms-field-payment-coupon .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Casella di immissione del coupon
.wpforms-form .wpforms-field.wpforms-field-payment-coupon input {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 120px;
width: 100%;
line-height: 1.3;
}
Pulsante di applicazione del coupon
.wpforms-form .wpforms-field-payment-coupon-button {
font-size: var(--wpforms-label-size-sublabel-font-size, 14px);
font-weight: 500;
line-height: 100%;
background-color: var(--wpforms-label-sublabel-color, rgba(0,0,0,0.5));
box-shadow: none;
color: var(--wpforms-button-text-color, #fff);
border: none;
border-radius: var(--wpforms-button-border-radius, 3px);
padding: 0 var(--wpforms-button-size-padding-h, 15px);
white-space: nowrap;
margin-left: 15px;
height: var(--wpforms-field-size-input-height);
cursor: pointer;
position: relative;
transition: all 0.15s ease-in-out;
text-decoration: none
}
/* Apply button focus and hover styles */
.wpforms-form .wpforms-field-payment-coupon-button:hover,
.wpforms.form .wpforms-field-payment-coupon-button:active,
.wpforms.form .wpforms-field-payment-coupon-button:focus {
background-color: var(--wpforms-field-text-color, rgba(0,0,0,0.7));
border: none;
box-shadow: none;
color: var(--wpforms-button-text-color, #fff)
}
Totale
Imbottitura totale
.wpforms-form .wpforms-field.wpforms-field-payment-total {
padding: 10px 0;
clear: both;
}
Etichetta totale
.wpforms-form .wpforms-field.wpforms-field-payment-total .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Ecco fatto! Ora sapete come utilizzare questi selettori per applicare CSS personalizzati ai campi di pagamento dei vostri moduli.
Poi, si desidera avere ancora più opzioni di personalizzazione? Consultate il nostro tutorial sulla personalizzazione del pulsante di invio.