每次我开发一个包含文本区域的新表单时,当我需要指定它的尺寸时,我都有以下困境:
使用CSS或使用文本区域的属性cols和行?
每种方法的优缺点是什么?
使用这些属性的语义是什么?
通常是怎么做的?
每次我开发一个包含文本区域的新表单时,当我需要指定它的尺寸时,我都有以下困境:
使用CSS或使用文本区域的属性cols和行?
每种方法的优缺点是什么?
使用这些属性的语义是什么?
通常是怎么做的?
当前回答
是的!…总是使用CSS样式文本区域,避免属性,除非你需要支持一些非常老的代理,不支持样式表。否则,您完全可以使用CSS。下面是我默认的CSS文本区格式,在任何网站看起来都很漂亮。根据您的喜好定制它。下面包含了注释,所以你可以看到为什么我选择这些CSS属性和值:
textarea {
display: inline-block;
margin: 0;
padding: .2em;
width: auto;
min-width: 30em;
/* The max-width "100%" value fixes a weird issue where width is too wide by default and extends beyond 100% of the parent in some agents. */
max-width: 100%;
/* Height "auto" will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering. Remove this if you want a pre-set height. Use "em" to match the font size set in the website. */
height: auto;
/* Use "em" to define the height based on the text size set in your website and the text rows in the box, not a static pixel value. */
min-height: 10em;
/* Do not use "border" in textareas unless you want to remove the 3D box most browsers assign and flatten the box design. */
/*border: 1px solid black;*/
cursor: text;
/* Some textareas have a light gray background by default anyway. */
background-color: #eee;
/* Overflow "auto" allows the box to start with no scrollbars but add them as content fills the box. */
overflow: auto;
/* Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually. Note: Resize isn't supported by most older agents and IE. */
resize: both;
}
在我的“reset”元素样式表中,我将这些值默认为“textarea”,这让你所有的文本区域都有一个很好的外观和感觉,当检测到滚动时,一个调整大小的选项卡(非ie浏览器),并修复了尺寸,包括一个高度,允许框根据你为用户放入的现有内容来调整自己的大小,以及一个宽度,不超出它的父容器的限制。
其他回答
CSS
input
{
width: 300px;
height: 40px;
}
HTML
<textarea rows="4" cols="50">HELLO</textarea>
我建议两者都用。如果客户端不支持CSS,行和cols是必需的,也是有用的。但作为一名设计师,我会重写它们以获得我想要的尺寸。
推荐的方法是通过外部样式表。
textarea { 宽度:300 px; 身高:150 px; } textarea > < textarea > < /
是的!…总是使用CSS样式文本区域,避免属性,除非你需要支持一些非常老的代理,不支持样式表。否则,您完全可以使用CSS。下面是我默认的CSS文本区格式,在任何网站看起来都很漂亮。根据您的喜好定制它。下面包含了注释,所以你可以看到为什么我选择这些CSS属性和值:
textarea {
display: inline-block;
margin: 0;
padding: .2em;
width: auto;
min-width: 30em;
/* The max-width "100%" value fixes a weird issue where width is too wide by default and extends beyond 100% of the parent in some agents. */
max-width: 100%;
/* Height "auto" will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering. Remove this if you want a pre-set height. Use "em" to match the font size set in the website. */
height: auto;
/* Use "em" to define the height based on the text size set in your website and the text rows in the box, not a static pixel value. */
min-height: 10em;
/* Do not use "border" in textareas unless you want to remove the 3D box most browsers assign and flatten the box design. */
/*border: 1px solid black;*/
cursor: text;
/* Some textareas have a light gray background by default anyway. */
background-color: #eee;
/* Overflow "auto" allows the box to start with no scrollbars but add them as content fills the box. */
overflow: auto;
/* Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually. Note: Resize isn't supported by most older agents and IE. */
resize: both;
}
在我的“reset”元素样式表中,我将这些值默认为“textarea”,这让你所有的文本区域都有一个很好的外观和感觉,当检测到滚动时,一个调整大小的选项卡(非ie浏览器),并修复了尺寸,包括一个高度,允许框根据你为用户放入的现有内容来调整自己的大小,以及一个宽度,不超出它的父容器的限制。
文本区域 { 高度: 自动; } <行的文本=“10”></textarea>
这将触发浏览器将textarea的高度EXACTLY设置为行数加上它周围的填充。将CSS高度设置为精确的像素数量会留下任意的空白。
根据w3c, cols和rows都是textarea的必需属性。行和Cols是将适合文本区域的字符数,而不是像素或其他潜在的任意值。顺着row /cols走。