Stylowanie przycisku wejściowego = „Plik” - HTML

W HTML każdy element jest wyświetlany jako konkretny element na stronie internetowej, taki jak przycisk, akapit, linia pozioma i wiele innych. Możemy jednak również zastosować niestandardowe style do tych elementów za pomocą CSS. Większość przeglądarek nie zmienia wyglądu elementów wejściowych za pomocą JavaScript lub CSS. Chociaż bezpośrednia stylizacja elementu wejściowego jest trudna, „„„Element pomaga nam stylizować dane wejściowe.

Wyniki uczenia się tego bloga to:

• Jak dodać element typu pliku wejściowego w HTML?
• Jak stylizować przycisk wejściowy = „Plik”?

Jak dodać element typu pliku wejściowego w HTML?

Element HTML z „typ" atrybut "plik”Jest wykorzystywany do tworzenia elementu wejściowego, który akceptuje pliki.

Sprawdźmy, że najpierw działa.

W HTML dodaj „„Element i powiązaj„typ”Atrybut jako„plik„Do tego:

Wyjście

Jak stylizować przycisk wejściowy = „Plik”?

Element z „type = plik”W zestawie domyślny styl. W poniższym przykładzie HTML „„Element jest wykorzystywany do stylizowania przycisku wejściowego„ type = plik ”.

W HTML wykonaj poniższe kroki, aby utworzyć stronę HTML:

• Dodać "”Element wraz z„Do”Atrybut i przypisz go klasę„w stylu pliku". „„Do„Atrybut służy do uzyskania dostępu do znacznika„ID" atrybut.
• Wewnątrz elementu etykiety dodaj „„Tag, aby osadzić obraz i„

  „Tag dla akapitu.

• Element „” jest dodawany z atrybutami „src” i „szerokości”.
• „„src”Atrybut zawiera adres URL obrazu.
• „„szerokość”Atrybut określa szerokość obrazu:

Prześlij zdjęcie

Wyjście

W następnej sekcji zostaną omówione właściwości CSS, które zamierzamy.

Identyfikator „pliku” stylu

#plik
Nie wyświetla się;

Aby ukryć zwykły element pliku wejściowego, „wyświetlacz„Własność jest ustalona jako„nic".

Wyjście

Stylowa klasa etykiet „w stylu plików”
Aby uzyskać dostęp do elementu etykiet, skorzystaj z „.w stylu pliku„Zajęć i zastosuj kod podwozie:

.w stylu pliku
FONT-FAMILY: „TREBUCHET MS”;
szerokość: 400px;
Blok wyświetlacza;
kolor tła: #f5f4f4;
Margines: Auto;
Kursor: wskaźnik;
Text-Align: Center;
Wyściółka: 20px;
RADIUS BERDER: 15px;
Border: 2px przerywany #cdc8c8;

W wyżej wymieniony kod „„”Jest stylizowany przez następujące właściwości CSS:

• "rodzina czcionek”Ustawia styl czcionki.
• "szerokość„Określa szerokość elementu„ ”.
• "wyświetlacz„Właściwość dostosowuje układ elementu„ ”. Wartość "blok”Przyjmie pełną szerokość.
• "kolor tła„Stosuje kolor do tła elementu„ ”.
• "margines„Właściwość dostosowuje przestrzeń wokół elementu.
• "kursor„Definiuje styl kursora myszy jako„wskaźnik„Wskazując na element.
• "tekst-align”Identyfikuje wyrównanie tekstu elementu.
• "wyściółka”Określa przestrzeń wokół zawartości elementu.
• "Radiusz graniczny”Sprawia, że ​​krawędzie elementu okrągłe.
• "granica”Dostosowuje granicę elementu, definiując wartości szerokości, stylu i koloru granicy.

Poniższy obraz wyświetla dane wyjściowe wyżej wymienionego kodu:

Stylowa klasa „w stylu plików” na zawisie

.Style pliku: Hover
kolor tła: RGB (228, 213, 213);

„„:unosić się”To pseudoklasa, która jest wykorzystywana do zastosowania efektu najemnika na element. W naszym scenariuszu, gdy kursor myszy wskazuje na element, kolor tła elementu zostanie zmieniony.

Wyjście

Nauczyliśmy cię, jak stylizować typ wejściowy = „plik”Przycisk w HTML.

Wniosek

HTML "„Element jest wykorzystywany do stylizacji elementu wejściowego za pomocą„type = plik" przycisk. Znacznik etykiety określa „Do”Atrybut używany do dostępu do„ID„Atrybut znacznika wejściowego. Następnie właściwości CSS, takie jak granica, kolor tła, kursor, wyściółka i wiele innych można wykorzystać do stylizowania przycisku wejściowego „type = plik”. Ten blog prowadził się do stylizacji typu wejściowego = „plik" przycisk.