在html中增加數字字段的大小

我想增加框以適合所需的佔位符文本。如果我將輸入類型從「數字」更改爲「文本」，它可以工作，但我想使用「數字」，因此我可以指定範圍。在html中增加數字字段的大小

<form action="Program3.php" method="post"> 
    <p>Distance (in miles): 
    <input style="height:200px;font-size:14pt;"> 
    <input type="number" name="distance" required 
    size="100" min="300" max="600" 
    required placeholder="Enter a number between 300 & 600">

來源

2016-07-25 Rhett Claypool

與CSS設置寬度：

<input type="number" name="distance" required 
 
style="width:20em" min="300" max="600" 
 
required placeholder="Enter a number between 300 & 600">

來源

2016-07-25 16:33:23 nicael

確定那是完美的工作。如何更改所需文字的字體顏色？ –

不使用像素大小來控制文本字段大小。至少使用印刷單位，比如'em'。例如如果OP的失明並以500pt字體運行，210px將只顯示一個字符的一小部分。 –

@Marc感謝您的評論！ – nicael

一個更優雅的解決辦法是使用JavaScript。這將會被自動設置你的所有輸入字段的佔位符的寬度：

document.addEventListener('DOMContentLoaded', function() { 
 
\t var input = document.querySelectorAll('input'); 
 
\t for(i=0; i<input.length; i++){ 
 
\t \t input[i].setAttribute('size',input[i].getAttribute('placeholder').length); 
 
\t } 
 
});

<input type="text" placeholder="A very long placeholder." /><br /> 
 
<input type="text" placeholder="A short one." />

來源

2016-07-25 16:40:40 icecub

你想顯示冗長的文字作爲佔位符所以我只好加大輸入字段不塔高度的寬度。

Style="width:300px"

來源

2016-07-25 16:41:58

在html中增加數字字段的大小

回答

相關問題