Rozmiar pola wyboru CSS

W tym artykule będziemy omawiać właściwości CSS, aby zwiększyć rozmiar pola wyboru. Domyślne pole wyboru w języku znaczników hipertekstu jest małe i czasami może być trudne do zlokalizowania na stronie internetowej. Będziemy omawiać wysokość, szerokość i transformację powszechnie używane właściwości CSS. Wdrożymy kilka przykładów związanych z tym zjawiskiem w środowisku notatnika ++.

Przykład 01: Zwiększenie rozmiaru domyślnego pola wyboru za pomocą właściwości wysokości i szerokości za pomocą tagów stylowych CSS

W tym przykładzie będziemy zwiększać rozmiar domyślnego wyboru, który podaje język znaczników hipertekstu. W tym przykładzie zostanie zastosowana technika tagu w stylu CSS, aby nadać pole wyboru inny rozmiar. Oba właściwości zmieniające rozmiar zostaną dodane do klasy stylizacji dla pola wyboru w tym przykładzie.

W powyższym skrypcie zaczynamy od nagłówka pliku, w którym nazywaliśmy tagiem CSS „stylem”. Wewnątrz tego znacznika dodamy klasę dla elementu wejściowego, który reprezentuje pole wyboru Language Hypertext Markup Language. Nazwimy rozmiar klasy. W tej klasie zdefiniujemy właściwości, które zmienią rozmiar pola wyboru. Najpierw zdefiniujemy właściwość szerokości, nadając jej wartość „50px”. Następnie zdefiniujemy właściwość wysokości, nadając jej tę samą wartość.

Następnie zamkniemy styl pliku i znaczniki nagłówka, aby otworzyć znacznik ciała. W znaczniku nadwozia zaczniemy od podania jej znacznika „H1”. Następnie otworzymy znacznik wejściowy. W tym znaczniku zdefiniujemy typ elementu wejściowego, oznaczając go jako pole wyboru. Następnie nazwiemy również „rozmiar” klasy stylizacji, którą stworzyliśmy w nagłówku pliku. Ostatecznie określimy to jako „sprawdzone” domyślnie i zamkniemy znacznik wejściowy i nadwozia.

Po zapisaniu poprzedniego skryptu i otwarciu go na naszej przeglądarce otrzymamy powyższe dane wyjściowe. W wyniku parametrów wysokości i szerokości w tym wyjściu pole wyboru rozszerzyło się pod względem wielkości.

Przykład 02: Zwiększenie rozmiaru domyślnego pola wyboru za pomocą właściwości wysokości i szerokości za pośrednictwem CSS inline

W tym przykładzie zostanie zastosowane podejście do tagu w stylu CSS w stylu CSS w tym przykładzie. W tym przykładzie zwiększymy domyślne pole wyboru oferowane przez język znaczników hipertekstu. Oba zmieniające rozmiar funkcje zostaną zastosowane do znacznika stylu wewnątrz elementu wejściowego w tym przykładzie.

Na początku skryptu otworzymy znacznik stylu w znaczniku głowy tylko dla ciała pliku, w którym wyrównujemy tekst ciała do środka w tym skrypcie. Następnie zamkniemy styl i znacznik głowy, aby otworzyć metkę nadwozia. W znaczniku ciała damy nagłówek na stronę za pomocą znacznika „H1”. Następnie otworzymy znacznik wejściowy i zdefiniujemy typ elementu wejściowego, identyfikując go jako „pole wyboru.”Po tym określamy styl pola wyboru za pomocą wbudowanego terminu CSS„ Styl.„W tym wezwaniu zdefiniujemy charakterystykę szerokości i wysokości, zapewniając im wartości pikseli. Następnie ustawimy go na „sprawdzone” domyślnie i zamkniemy znaczniki wejściowe i nadwozia. Zapiszymy ten plik w „.Format HTML ”i otwórz go na naszej przeglądarce, aby uzyskać dane wyjściowe pokazane poniżej:

W tym wyjściu możemy zauważyć, że pole wyboru wzrosło ze względu na właściwości wysokości i szerokości zgodnie z definicją atrybutu stylu znacznika wejściowego.

Przykład 03: Zwiększenie rozmiaru domyślnego pola wyboru za pomocą właściwości transformacji za pośrednictwem stylu CSS

Zwiększymy rozmiar domyślnego pola wyboru dostarczonego przez język znaczników hipertext. W tym przykładzie pole wyboru otrzyma dostosowany rozmiar za pomocą techniki tagu stylu CSS. W tym przykładzie właściwość transformacji zostanie dodana do klasy stylizacji wyboru, która powiększy domyślny rozmiar pola wyboru.

W poniższym skrypcie zaczynamy od nagłówka pliku, w którym nazwaliśmy tag CSS „Style.”W obrębie znacznika wejściowego dodamy klasę do elementu wejściowego, który reprezentuje pole wyboru Język Znaków hipertekstowych. Następnie zadzwonimy do rozmiaru klasy. W nim utworzymy atrybut, który dostosuje rozmiar pola wyboru. Właściwość transformacji zostanie zdefiniowana i zapisana za pomocą słowa kluczowego skali, które zaakceptuje liczbę całkowitą skalowania jako wejście. Następnie zamkniemy znacznik stylu i nagłówek pliku, aby zrobić miejsce na znacznik ciała. Zaczniemy od znacznika „H1” w znaczniku ciała, aby nadać mu nagłówek. Następnie otworzymy znacznik wejściowy, w którym będziemy oznaczyć element wejściowy jako pole wyboru i opiszemy jego typ. Następnie nazwiemy „rozmiar” klasy stylizacji, którą ustaliliśmy w nagłówku pliku. Wreszcie, ustawimy domyślnie na „sprawdzone” i zamkniemy znaczniki wejściowe i nadwozia.

Uzyskamy powyższe dane wyjściowe po zapisaniu poprzedniego skryptu i otwarciu go w naszej przeglądarce. W tym wyjściu widzimy, że pole wyboru rozszerzyło się pod względem wielkości z powodu właściwości transformacji.

Przykład 04: Za pomocą trzech właściwości CSS w celu zwiększenia rozmiaru pola wyboru w pliku HTML

W tym przykładzie zostanie zastosowane podejście do tagu w stylu CSS w stylu CSS w tym przykładzie. Wszystkie trzy właściwości CSS zostaną dodane do znacznika stylu wewnątrz znacznika wejściowego w tym przykładzie. Zwiększymy domyślny rozmiar wyboru oferowany przez język znaczników hipertekstu.

W tym skrypcie zaczniemy od otwarcia znacznika stylu w znaczniku głównym, który dotyczy tylko ciała pliku. Następnie wyśrodkujemy zawartość ciała. Styl i znaczniki zostaną następnie zamknięte, umożliwiając otwarcie znacznika ciała. Za pomocą elementu „H1” w znaczniku nadwozia damy stronie nagłówek. Następnie użyjemy wbudowanego terminu CSS „styl”, aby wyrazić styl pola wyboru. W tym wezwaniu określamy charakterystykę szerokości i wysokości, dostarczając im wartości pikseli. Następnie dodamy również właściwość transformacji w tym wywołaniu, aby odpowiednio skalować pole wyboru. Następnie zdefiniujemy to jako „sprawdzone” i zamkniemy znaczniki wejściowe i nadwozia. Zapiszymy ten plik w „.Format HTML ”i otwórz go na naszej przeglądarce, aby uzyskać dane wyjściowe pokazane poniżej:

W wyniku właściwości wysokości, szerokości i transformacji w tym wyjściu, które zostały zdefiniowane wewnątrz znacznika wejściowego, pole wyboru rozszerzyło się w rozmiarze.

Wniosek:

W tym artykule omówiliśmy kilka właściwości CSS, które są używane do zwiększenia rozmiaru lub rozszerzenia domyślnego pola wyboru w pliku HTML. Pierwsze dwie właściwości to wysokość i szerokość, które można dodać do klasy stylu lub znacznika w elemencie wejściowym języka znacznika hipertexta. Właściwości te zastosowano do zwiększenia wielkości pola wyboru w dwóch różnych technikach CSS, które są stylami CSS i CSS inline. Wdrożyliśmy również właściwość transformacji, którą zapewnia CSS, która wykorzystuje funkcję skali do rozszerzenia domyślnego pola wyboru.