Hvordan style input og sende inn knapp med CSS

CSS er et språk for å lage stilark som beskriver hvordan et dokument blir presentert på et markeringsspråk, for eksempel HTML eller XML. Sammen med HTML og JavaScript er CSS en nøkkelkomponent i World Wide Web. Ved hjelp av CSS kan brukere style alle HTML -elementer, inkludert tabeller, knapper, inngangsfelt, skjemaer og mange flere.

Dette innlegget vil forklare:

• Hvordan style inputfelt med CSS?
• Hvordan style Send -knapp med CSS?

Hvordan style inputfelt med CSS?

For å style inngangsfeltet med CSS, prøv ut den nevnte prosedyren.

Trinn 1: Opprett inngangsskjema

Først av alt, lag et skjema i HTML. For å gjøre det, følg instruksjonene som er oppført nedenfor:

• Først må du lage et skjema ved hjelp av "" stikkord.
• Inne i formen, “”Element er definert for å spesifisere bildetekster for“inngang”Elementer. Etiketten er “til”Attributt brukes til å feste etikettelementet med elementet gjennom“id”.
• “type”Attributt bestemmer inngangstypen, for eksempel tekst eller nummer.
• “klasse”Attributt tildeles“Inngang" Navn, "stedholder”Attributt tildeler plassholderteksten i inndatafeltet:

Skriv inn fornavn



Skriv inn etternavn

Produksjon

Trinn 2: Stilinngangsknapp i CSS

For å style inngangsknappen i CSS, sjekk ut de gitte egenskapene:

input
polstring: 8px;
Border-Radius: 10px;
Margin: 5px Auto;
Border: 1px Solid #918383;
Bakgrunnsfarge: #87B8B8;
Bokseskygge: 1px 2px 1px 2px RGB (230, 229, 229);
Farge: #C9C2C2;
Oversikt: Ingen;
Font-størrelse: 18px;

Få tilgang til “inngang”Klasse og bruk deretter under-nevnte egenskaper:

• Sett "polstring”Som spesifiserer plassen rundt elementets innhold.
• “Border-Radius”Eiendom setter elementets kanter rundt.
• “margin”Eiendom med verdien”5px Auto”Legger til plass”5px”På toppen og bunnen, og“bil”Brukes til å sette lik plass rundt elementet til venstre og høyre.
• “grense”Eiendom spesifiserer grensen rundt bordet.
• “bakgrunnsfarge”Eiendom brukes til å spesifisere fargen på bakgrunnen.
• “Bokseskygge”Legger til en skygge rundt elementet. Det er en shorthand-egenskap som spesifiserer x-offset, y-offset, uskarphetseffekt, spredningseffekt og farge for skyggen.
• “farge”Eiendom refererer til elementets skriftfarge.
• “skissere”Justerer linjen rundt elementene for å gjøre den dominerende.
• “skriftstørrelse”Eiendom brukes til å stille inn elementets skriftstørrelse.

Produksjon

Deretter får du tilgang til “merkelapp”Element for å style det:

merkelapp
Font-størrelse: 18px;
Farge: RGB (15, 15, 15);
Margin: 20px;

Etter tilgang til etikettelementet, bruk styling etter eget valg. For eksempel har vi søkt "skriftstørrelse”,“farge”, Og“margin" egenskaper.

Produksjon

La oss gå mot neste avsnitt for å style sendeknappen ved hjelp av CSS.

Hvordan style Send -knapp med CSS?

For å style send-knappen med CSS, undersøk eksemplet nedenfor, som viser en trinnvis guide for hvordan du oppretter og styler HTML-knappen.

Trinn 1: Opprett innsendingsknapp

Til å begynne med, legg til overskriftstekst inne i overskriften -taggen "

”. Opprett deretter en knapp ved å bruke "”Element og angi knappetypen som“sende inn”:

Stilknappelement

Sende inn

Produksjon

Trinn 2: Stil "knapp" -element

For å style knappen i CSS, sjekk ut egenskapene beskrevet nedenfor:

knapp
polstring: 12px 40px;
Border-Radius: 8px;
Bokseskygge: 2px 2px 2px 1px RGB (131, 131, 219);
Grense: 1px fast grått;
Font-størrelse: 20px;

Få tilgang til knappelementet med tagnavn og bruk egenskapene på knappen i henhold til din preferanse. For eksempel har vi søkt "polstring”,“Border-Radius”,“Bokseskygge”,“grense”, Og“skriftstørrelse" egenskaper.

Produksjon

La oss legge til hoverseffekten på knappelementet:

Knapp: Hopp
Bakgrunnsfarge: CadetBlue;
Farge: RGB (246, 244, 248);

“Knapp: Hold”Selector brukes til å bruke effekten av svevet på knappen. Ved hjelp av “sveve”Selector, brukere kan generere CSS-effekten i sanntid. For eksempel har vi satt "bakgrunnsfarge”Og“farge”Egenskaper som beskrevet ovenfor:

Vi har diskutert for å style inngangsfeltet og sende inn knapp med CSS.

Konklusjon

For å style inngangselementet og sende-knappen med CSS, brukes forskjellige egenskaper til CSS, inkludert "polstring", "Border-Radius", "Box-Shadow", "Margin", "Border", "Bakgrunnsfarge", " fontstørrelse ”og mange flere. Brukere kan bruke de spesifiserte egenskapene ved å få tilgang til elementene via tagnavnet. Dette innlegget har vist metoden for å style inngangstekstfeltene og sende inn knapper med CSS.