[Så här] Ändra kontaktformulär 7 Platshållarens textfärg

Visste du att kontaktformulär 7 låter dig ändra färgen på platshållartexten?

Om du någonsin har använt kontaktformulär 7, kanske du har märkt att det har en standardfärg för platshållarens text. Du kan anpassa platshållartexten med hjälp av kontaktformulärets 7 inbyggda alternativ-eller till och med anpassa den med CSS!

Den här artikeln visar hur du ändrar kontaktformulär 7: s platshållarens textfärg och tillhandahåller kodexempel för båda metoderna.

Innehåll[Show]

Vi har upptäckt att många klienter i vårt supportforum har problem med att ställa in eller ändra teckensnittsfärgen på kontaktformulär 7 platshållartext.

Kontaktformulär 7 är ett av de mest populära WordPress -pluginsna idag, så att du kan skapa grundläggande eller komplexa kontaktformulär på din WordPress -webbplats. Vi har redan skrivit hur man åtgärdar fel i att skicka kontaktformulär 7 -meddelanden.

Vi visar dig hur du anpassar textfärg med anpassad kod: Om du inte är bekant med kodning men behöver ett enklare och lättare att använda formulärbyggar-plugin, prova WPForms.

CSS för CF7 platshållartext

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Använd! Viktig tagg

"! Viktigt" -taggen används för att garantera att andra stilar inte tillämpas på dessa CSS -väljare. Detta säkerställer att stilen fungerar. Om du vill att stilen endast ska användas på kontaktformulär 7 -fält kan du använda följande:

.wpcf7 ::-webkit-input-placeholder { / * WebKit webbläsare * / färg: #000! viktigt; opacitet: 1; }

Om du behöver avslöja ett specifikt kontaktformulär på din webbplats utan att ändra andra kontaktformulär 7, leta efter formuläridentifieraren enligt följande:

ändra cf7 platshållartext

Högerklicka på elementet i fråga och välj Inspektera element. Genvägar: F11 (Windows) eller CMD + SHIFT + C (MAC) Leta upp ID: t och ersätt 'wpcf_id' med det i den här koden:

#wpcf_id :: platshållare {färg: #000! viktigt; opacitet: 1; }

Lämna gärna en kommentar eller ställ en fråga nedan!

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...