Domyślny rozmiar elementu wejściowego

Question

Domyślnym elementem wejściowym jest size = "20", jeśli nie jest on zdefiniowany w linii lub przypisana jest do niego reguła stylu CSS.

Jak ustawić domyślny faktyczny rozmiar wartości? Dla innych elementów:

<div style="display: inline; width: auto;"> 
    The box will only fit the width of it's content 
</div> 

szerokość: auto to wszystko, czego potrzebujesz. Nie mogę ustawić określonej szerokości, ponieważ wartość może być dłuższa. Np

<input id="short" type="text" value="1000" /> 
<input id="long" type="text" value=" Areally long name is in this input field." /> 

że chce #short się wielkość 1000 (głównie rozmiar = „4” + padding), ale #long się tak długo, jak potrzeba. Te dane wejściowe przychodzą programowo, więc nie mogę po prostu umieścić krótkiej lekcji na tej, którą chcę krótko i długiej klasy na tej, którą chcę długo. Naprawdę by mi się to podobało, gdybym mógł umieścić:

input { width: auto; } 

W każdym razie, aby to zrobić?

Answer 1

Element wejściowy domyślnie jest size = "20"

Ten "Domyślna wielkość" zależy od przeglądarki, wersji i systemu operacyjnego. Nie można tego zrobić w stylach śródliniowych.

najlepszym rozwiązaniem jest, aby ustawić szerokość i wyściółka więc to dodaje się do 100%

input { 
    width: 98%; 
    padding: 1%; 
} 

następnie ustawić go do absolutnego lewej i prawej 0

<fieldset> 
    <input type="text" /> 
</fieldset> 

wreszcie dodać to CSS

<style type="text/css"> 
    fieldset { 
     position: relative; 
    } 

    input { 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
</style> 

Answer 2

Zakładając, że masz w formularzu każde wejście we własnym wierszu, możesz ustawić atrybut rozmiaru na pożądany rozmiar, ale lso dodać css:

input[type="text"] { 
    max-width: 100%; 
} 

Zapewnia to, że pole nie przepełni formularza. To podejście daje wizualną wskazówkę, ile danych oczekuje się dla krótkich pól (ponieważ będą one miały odpowiedni rozmiar), a jednocześnie nakłada ograniczenia na długie.