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>而不是<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）。

形成造型最佳实践

1 个答案: