Styling en inngangstype = “Fil” -knapp - HTML

I HTML vises hvert element som et bestemt element på websiden, for eksempel en knapp, avsnitt, horisontalt linje og mange flere. Vi kan imidlertid også bruke tilpassede stiler på disse elementene ved hjelp av CSS. Flertallet av nettleserne endrer ikke utseendet til inngangselementene ved hjelp av JavaScript eller CSS. Selv om direkte styling av et inngangselement er vanskelig, "”Element hjelper oss med å style inngangene.

Læringsutbyttet til denne bloggen er:

• Hvordan legge til et inndatafiltypeelement i HTML?
• Hvordan style en inngangstype = “Fil” -knapp?

Hvordan legge til et inndatafiltypeelement i HTML?

HTML -elementet med “type" Egenskap "fil”Brukes til å lage et inngangselement som godtar filer.

La oss sjekke at det fungerer først.

I HTML, legg til en "”Element og knytte“type”Attributt som“fil”Til det:

Produksjon

Hvordan style en inngangstype = “Fil” -knapp?

Elementet med "type = fil”Kommer med standardstilen. I eksemplet nedenfor, html “”Element brukes til å style en inngang“ type = fil ”-knapp.

I HTML, følg trinnene nedenfor for å opprette en HTML -side:

• Legg til en "”Element sammen med“til”Attributt og tilordne den en klasse”filstil”. “til”Attributt brukes til å få tilgang til taggen“id" Egenskap.
• Inne i etikettelementet, legg til "”Tag for å legge inn bildet og“

  ”Tag for avsnittet.

• “” -Elementet er lagt til med “SRC” og “Bredde” -attributtene.
• “src”Attributt inneholder bildens url.
• “bredde”Attributt bestemmer bildets bredde:

Last opp bilde

Produksjon

I neste avsnitt vil CSS -egenskapene vi skal bruke, bli diskutert.

Stil “fil” -D-

#File
Display: Ingen;

For å skjule det vanlige inndatafilelementet, "vise”Eiendom er satt som“ingen”.

Produksjon

Stil "filstil" etikettklasse
For å få tilgang til etikettelementet, bruk ".filstil”Klasse og bruk koden nedenfor:

.filstil
Font-Family: 'Trebuchet MS';
Bredde: 400px;
Display: Block;
Bakgrunnsfarge: #F5F4F4;
Margin: Auto;
Markør: peker;
tekst-align: sentrum;
polstring: 20px;
Border-Radius: 15px;
Border: 2px stiplet #CDC8C8;

I den ovennevnte koden, "”Er stylet gjennom å følge CSS -egenskaper:

• “Font-familie”Angir skriftstilen.
• “bredde”Bestemmer“ ”elementets bredde.
• “vise”Eiendom justerer“ ”elementets oppsett. Verdien "blokkere”Vil ta full bredde.
• “bakgrunnsfarge”Bruker fargen på“ "elementets bakgrunn.
• “margin”Eiendom justerer plassen rundt elementet.
• “markør”Definerer musemarkørstilen som en“peker”Når du peker på elementet.
• “Tekstalign”Identifiserer elementets tekstjustering.
• “polstring”Bestemmer plassen rundt elementinnholdet.
• “Border-Radius”Gjør elementets kanter rundt.
• “grense”Justerer elementets grense ved å definere verdiene for grensens bredde, stil og farge.

Bildet nedenfor viser utgangen fra ovennevnte kode:

Stil "filstil" -klasse på svevet

.Filstil: Hopp
bakgrunnsfarge: RGB (228, 213, 213);

“:sveve”Er en pseudoklasse som brukes til å anvende sveveeffekten på elementet. I vårt scenario, når musemarkøren peker på elementet, vil bakgrunnsfargen på elementet bli endret.

Produksjon

Vi har lært deg hvordan du kan style en inngangstype = "fil”-Knappen i HTML.

Konklusjon

HTML “”Element brukes til å style inngangselementet med“type = fil”-Knappen. Etikett -taggen definerer "til”Attributt som brukes til å få tilgang til“id”Attributt til inngangskoden. Etter det kan CSS-egenskapene som grense, bakgrunnsfarge, markør, polstring og mange flere brukes til å style inndata "type = fil" -knappen. Denne bloggen guidet relatert til styling en inngangstype = "fil”-Knappen.