我在Photoshop中创建了一组很好的表单元素,我希望将它们转换为HTML和CSS。简单的输入文本表单将具有背景图像,因为字段的大小不会改变。但是,文本区域表单将在用户键入时动态更改大小。
通常,要构建这种样式,我会将表单字段包装在div中,如下所示:
<div class = "textarea-top">
<div class = "textarea-bottom">
<textarea></textarea>
</div>
</div>
或者在一个包装div中使用多个背景图像:
<div class = "textarea">
<textarea></textarea>
</div>
有没有更好的方法来解决这个问题?重申一下,字段样式是可以重复的高级图像(对于字段的主体),并且具有顶部和底部的样式。问题是,处理这些高级表单样式的最佳实践是什么?
答案 0 :(得分:4)
我不完全确定你的“最佳实践”是什么意思,但我要改进的一件事是语义。
你可以(应该?)使用<fieldset>
而不是<div>
,而不是<div>
。
你不需要在textarea
周围使用两个<div>
,或者在一个<textarea>
上使用多个背景图片(这是一个CSS3属性,而不是广泛使用 - 支持)。
相反,您应该将<label>
包裹在<fieldset class="expandableInput">
<label>
Semantic text:
<textarea></textarea>
</label>
</fieldset>
元素中,然后嵌套背景图片,如下所述:
试试这个:
<label>
奖励:将<select>
这样的表单元素包裹起来,可以提供更大的点击区域,让用户可以专注于手头的表单元素。只是要警惕.expandableInput {background: url(/path/to/first/img);}
.expandableInput label {display: block; background: url(/path/to/second/img);}
.expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);}
,它不会很好(即使它是有效的HTML)
CSS类似于:
{{1}}
也; 对于表单元素的一致外观,在每个浏览器和平台,我强烈推荐Nathan Smith的Formalize CSS(在旧浏览器中需要JS支持HTML5)。