默認輸入元素大小

默認情況下，輸入元素的大小=「20」（如果未內聯定義或CSS樣式規則歸因於該元素）。默認輸入元素大小

你如何使默認值的實際大小？對於其他元素：

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

寬度：自動是你所需要的。由於該值可能會更長，因此我無法放置定義的寬度。例如：

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

我想#short成爲1000（基本上大小=「4」 +填充），但#long大小爲只要需要。這些投入正在以編程方式進行，所以我不能簡單地在我想要的短期課程上加上一個短期課程，而在我想要的很長的課程上加上一個長期課程。我真的只是喜歡它，如果我可以把：

input { width: auto; }

無論如何要做到這一點？

來源

2012-07-31 o_O

可能重複[寬度：自動字段]（http://stackoverflow.com/questions/4622086/widthauto-for-input-fields） – j08691 2012-07-31 20:37:57

我看到這一點和其他一些，但他們都試圖要做的是有一個輸入填寫父項。我希望根據內容的多個輸入大小。 – 2012-07-31 20:44:30

但它是一個確切的副本http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value – 2012-07-31 20:47:41

默認的輸入元素是大小=「20」

這種「默認大小」依賴於瀏覽器，版本和您的操作系統。這是不可能的內聯樣式。

最好的解決辦法是設置寬度和填充所以加起來爲100％

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

然後將其設置到絕對左和右0

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

最後加入此CSS

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

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

來源

2012-08-07 12:40:45 Sato

嗨，你是說輸入大小取決於瀏覽器和OS。您是否有鏈接或表格根據瀏覽器的版本和操作系統顯示不同的輸入大小？這將是非常有用的。 – Fab 2013-08-22 12:06:30

你有什麼建議嗎？ – Fab 2013-08-27 07:04:33

據我所知，目前還沒有關於這個問題的任何文章。 – Sato 2013-11-20 11:09:33

假設您在表單中的每行上都有自己的輸入，您可以將size屬性設置爲所需的大小，但是另外添加一個css：

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

這確保字段不會溢出表單。這種方法提供了一個視覺提示，預測短字段有多少數據（因爲它們的大小合適），同時對長字段進行限制。

來源

2017-10-18 18:43:54 mefopolis

默認輸入元素大小

回答

相關問題