Jak ustawiać elementy wejściowe HTML?

Mam nadzieję znaleźć zasób do ustawiania elementów wejściowych na stronie HTML. Trudno mi uzyskać element select i pole tekstowe o tej samej szerokości, nawet przy użyciu atrybutu style width, a jest to jeszcze trudniejsze w różnych przeglądarkach. Wreszcie, wejścia plików wydają się niemożliwe, aby dostać się do tej samej szerokości przeglądarki. Czy są jakieś dobre przewodniki lub wskazówki, aby to osiągnąć? Być może są jakieś domyślne atrybuty CSS, które powinienem ustawić.

Author: Greg, 2008-10-08
Source

9 answers

Przetestowałem to w Internet Explorer 7, Firefox 3 i Safari / Google Chrome. Zdecydowanie widzę problem z <select> i <input type="file">. Moje ustalenia pokazały, że jeśli wszystkie wejścia będą stylizowane na tę samą szerokość, <select> będzie o około 5 pikseli krótszy we wszystkich przeglądarkach.

Użycie Eric Meyer CSS reset script nie pomaga w tym problemie, jednak jeśli po prostu zrobić swoje wejścia <select> o 5 pikseli szersze, uzyskasz bardzo dobre (choć nie idealne) wyrównanie w głównych przeglądarkach. Na tylko jeden, który różni się Safari / Google Chrome, i wydaje się być 1 lub 2 piksele szersze niż wszystkie inne przeglądarki.

Jeśli chodzi o <input type="file">, nie masz zbyt dużej elastyczności w stylizacji. Jeśli JavaScript jest opcją dla ciebie, możesz zaimplementować metodę pokazaną na quirksmode , aby uzyskać większą kontrolę nad stylizacją kontroli wysyłania plików.

Zobacz mój pełny przykład pracy poniżej w XHTML 1.0 Strict dla typowej formy ze spójnymi szerokościami wejściowymi. Zauważ, że to nie używa sztuczki o szerokości 100% wskazanej przez innych tutaj, ponieważ ma ten sam problem z niespójnymi szerokościami. Ponadto nie ma tabel używanych do renderowania formularza, ponieważ tabele powinny być używane tylko dla danych tabelarycznych, a nie dla układu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example Form</title>
  <style type="text/css">
    label, input, select, textarea {
        display: block;
        width: 200px;
        float: left;
        margin-bottom: 1em;
    }

    select {
        width: 205px;
    }

    label {
        text-align: right;
        width: 100px;
        padding-right: 2em;
    }

    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="java">Java</option>
        <option value="ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>
</html>
 17
Author: cowgod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-17 17:59:37

Zazwyczaj umieszczam je w komórce div lub tabeli( Wiem) o żądanej szerokości, a następnie Ustaw styl select I input:width na 100%, aby wypełniły div / komórkę, w której się znajdują.

 13
Author: Ron Savage,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-27 16:00:36

Odkryłem, że jeśli ustawisz select i input Element border i padding na 0, będą one tej samej szerokości. (Testowane na Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Umieszczenie obramowania / paddingu 1px na elementach select I input powoduje, że element wejściowy jest szerszy o 2 piksele. Na przykład: 

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
 2
Author: Dalius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-19 00:00:00

Poza szerokością, ustawiłbym również granicę i margines, to może mieć wpływ na twoje kontrole. Coś takiego może pomóc: 

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron też ma dobry pomysł.

 1
Author: Matthew Scharley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:50:43

Czy uruchamiasz pliki CSS z ustawieniami podstawowymi? Przydatne może być wyłączenie padding i margin off na wszystkich elementach. Nie testowałem, czy może to mieć wpływ na elementy select / input.

Oto przykładowy Reset CSS od Erica Meyera:

Http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

 0
Author: Dave Rutledge,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-07 22:11:42

Wejścia do plików mogą być zasadniczo różne w różnych przeglądarkach i zdecydowanie nie pozwalają na wiele w sposobie dostosowywania, co może być denerwujące, ale rozumiem również, dlaczego tak jest z punktu widzenia bezpieczeństwa. Na przykład spróbuj zmienić tekst przycisku "Przeglądaj", który pojawia się w większości przeglądarek, lub porównaj plik wprowadzany w Safari z innymi przeglądarkami...

 0
Author: mmacaulay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-07 23:52:22

Nie wydaje mi się, żeby pomysł Rona zadziałał...

Przypadek testowy: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

Powoduje to, że wejście jest o jakiś px szersze niż select (jest to prawdopodobnie zależne od systemu operacyjnego). Nie jestem pewien, czy można to osiągnąć, nawet przy sztuczce +5px, ponieważ stylizacja select wydaje się zależna od systemu operacyjnego (przynajmniej Windows theme).

 0
Author: AlfaTeK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:07:37

Jeśli potrzebujesz { width: 100%; } i nie podano szerokości w pikselach, to jQuery jest twoim przyjacielem: 

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 pikseli działa najlepiej dla mnie (FF9), edytuj jak uważasz.

 0
Author: Slawa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-02 13:09:31

Dzieje się tak dlatego, że w przypadku ramka i wypełnienie są dodawane do szerokości (jak w przypadku większości innych elementów). Z

Możesz to obejść zwiększając szerokość, aby uwzględnić to: 

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Lub (jeśli możesz polegać na obsłudze przeglądarki) możesz użyć nowej właściwości CSS3 box-sizing, aby sprawić, że będą one zachowywały się spójnie i narysowały obramowanie i obramowanie poza elementem szerokość: 

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Alternatywnie można ustawić rozmiar pudełka na border-box, aby dane wejściowe zachowywały się jak Select, z wypełnieniem narysowanym wewnątrz szerokości pudełka.

Testowane w Chrome, IE8, FF

 0
Author: Jim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-13 09:22:18