如何设置HTML文本框的大小?

如何设置HTML文本框的大小?

10 Solutions collect form web for “如何设置HTML文本框的大小?”

只要使用:

textarea { width: 200px; } 

要么

 input[type="text"] { width: 200px; } 

取决于“文本框”的含义。

您的标记:

 <input type="text" class="resizedTextbox" /> 

CSS:

 .resizedTextbox {width: 100px; height: 20px} 

请记住,文本框大小是W3C盒子模型的“牺牲品”。 受害者的意思是文本框的高度和宽度除了填充高度/宽度和边框宽度之外,还是上面指定的高度/宽度属性的总和。 出于这个原因,根据不同浏览器中的默认填充,您的文本框在不同的浏览器中的大小会有所不同。 虽然不同的浏览器倾向于定义不同的填充到文本框,但大多数重置样式表不倾向于在重置表中包含<input />标记,因此请记住这一点。

你可以通过定义你自己的填充来标准化。 这是您的CSS与指定的填充,所以文本框在所有浏览器中看起来相同:

 .resizedTextbox {width: 100px; height: 20px; padding: 1px} 

我添加了1像素的填充,因为一些浏览器往往会使文本框看起来太挤塞,如果填充是0px。 根据你的devise,你可能想要添加更多的填充,但是强烈build议你自己定义填充,否则你会把它留给不同的浏览器来决定自己。 为了在浏览器中保持更高的一致性,您还应该自己定义边框。

 input[type="text"] { width:200px } 

您的文本框中的代码:

 <input type="text" class="textboxclass" /> 

你的CSS代码:

 input[type="text"] { height: 10px; width: 80px; } 

要么

 .textboxclass { height: 10px; width: 80px; } 

所以,首先你select你的元素的属性(看第一个例子)或类(看最后一个例子)。 稍后,您将高度和宽度值分配给您的元素。

这在IE 10和FF 23中适用于我

 <input type="text" size="100" /> 

如果您不想使用类方法,则可以使用父子方法在文本框中进行更改。

例如。 我已经在我的表格div中创build了一个表单。

HTML代码:

 <div class="form"> <textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea> </div> 

现在CSS代码将如下所示:

 .form textarea{ height: 220px; width: 342px; 

问题解决了。

尝试:

 input[type="text"]{ padding:10px 0;} 

这是它保持独立于为文本框设置的文本大小的方式。 您正在使用填充来增加高度

试试这个代码:

 input[type="text"]{ padding:10px 0;} 

这样它仍然独立于为文本框设置的文本大小。 您正在使用填充来增加高度。

可以使用heightwidth属性来确定元素的大小。

小心! 宽度属性由max-width属性剪裁。 所以我用….

  <form method="post" style="width:1200px"> <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4> 
  • 添加一个简单的spacer到twitter bootstrap
  • 如何保持头静态,滚动时总是在顶部?
  • 如何在CSS 3中为基于浏览器的浏览器制作斜angular和模拟效果?
  • 居中alignment图像水平内
  • 如何样式SVG与外部CSS?
  • 在d3 javascript中的圆形对象内添加图像?
  • 内联块列表项中不需要的边距
  • 只有CSS的砌体布局,但水平排列元素
  • * | *这是什么意思在CSS?
  • HTML / CSS中的收音机/checkboxalignment方式
  • Bootstrap 3 - 列内的自定义div的高度 - 100%