• Artykuł

          

Encyklopedia: Jak zmienić wygląd input type text - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-11

Często spotykanym problemem, przy dostosowywaniu formularzy do określonych potrzeb, jest zmiana wyglądu poszczególnych typów pól input. Można tego dokonać za pomocą użycia Kaskadowych Arkuszy Stylów (CSS – ang. Cascading Style Sheets). Jednym ze sposobów określania formatowania pól input typu tekstowego jest przypisanie tym polom osobnej klasy i ustawienie dla niej konkretnego stylu. Jest to dobry sposób dla określenia wyglądu jednego lub kilku wybranych pól.

W celu ustawienia jednakowego wyglądu dla wszystkich pól, dopisywanie atrybutu class do każdego znacznika input, opisującego pole tekstowe, okazuje się niepraktyczne, w szczególności, gdy formularz jest rozbudowany i posiada wiele pól tekstowych. CSS w prosty sposób umożliwia zmianę wyglądu wszystkich pól input type=text jednocześnie, za pomocą użycia selektorów atrybutów. W Internet Explorer selektory atrybutów są obsługiwane od wersji 7.

Aby wybrać w CSS wszystkie pola input type=text, należy użyć selektora:

input[type=text]

Przykład

Przykład zastosowania selektora w nagłówku strony*:*

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Jak zmienić wygląd input type=text</title>
    <style type="text/css">
        input[type="text"]{
            width: 100px; 
            color: blue; 
            background-color: #98FB98;
            border: 2px ridge darkgreen;
            font-family: Verdana,sans-serif;
            font-size: 1em;
            font-style: italic;
            padding: 4px;
            text-align: center; }
    </style>
</head>
<body>
    <input type="text" value="example" />
</body>
</html>

Efekt działania przykładowego kodu przedstawiony został na Rys. 1.

Rys. 1. Zmieniony wygląd input type=text.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać znacznik input w samouczku: