形成造型最佳实践

Question

我在Photoshop中创建了一组很好的表单元素,我希望将它们转换为HTML和CSS.简单的输入文本表单将具有背景图像,因为字段的大小不会改变.但是,文本区域表单将在用户键入时动态更改大小.

通常,为了构建这种样式,我将表单字段包装在div中,如下所示:

<div class = "textarea-top">
  <div class = "textarea-bottom">
    <textarea></textarea>
  </div>
</div>

或者在一个包装div中使用多个背景图像:

<div class = "textarea">
  <textarea></textarea>
</div>

有没有更好的方法来解决这个问题？重申一下,字段样式是可以重复的高级图像(对于字段的主体),并且具有顶部和底部的样式.问题是,处理这些高级表单样式的最佳做法是什么？

Answer 1

我不完全确定你所说的“最佳实践”是什么意思，但我要改进的一件事是语义。您可以（应该？）使用<fieldset>'s 代替毫无意义的<div>。

而且您不需要<div>在 周围使用两个textarea，甚至不需要在单个背景图像上使用多个背景图像<div>（这是 CSS3 属性，并未得到广泛支持）。

相反，您应该将 包装<textarea>在一个<label>元素中，并嵌套您的背景图像，如下所述：

尝试这个：

<fieldset class="expandableInput">
  <label>
    Semantic text:
    <textarea></textarea>
  </label>
</fieldset>

<label>奖励：像这样将表单元素包装在 中，可以提供更大的点击区域，以便用户能够将注意力集中在手头的表单元素上。只是要小心<select>'s，它的效果不太好（即使它是有效的 HTML）

CSS 会是这样的：

.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);}

还; 为了在每个浏览器和平台上保持表单元素的一致外观，我强烈推荐 Nathan Smith 的Formalize CSS（它需要 JS 在旧版浏览器中支持 HTML5）。