1

我想在段落中间有一个输入框，标签下方是较小的文本。有一些像：

Hello [________________], This is to inform you 
       (Customer Name)
that the [____________] you ordered is no longer
          (Item Name)
available.

我认为这很容易做到，但我的大脑今天似乎没有工作。是否可以仅使用 CSS 来做到这一点，并且以足够简单的方式使其可以轻松地适应不同的形式？

4

2 回答 2

3

这就是我所做的，它并不完美，但向您展示了一条路要走。

<html>
<head>
<style>
.input {
    position: relative;
    display: inline-block;
    height: 1.8em;
}
.input label {
    display: block;
    font-size: 60%;
    font-weight: bold;
    position: absolute;
    text-align: center;
    width: 100%;
}
input {
    border: none;
    border-bottom: 1px solid black;
}
</style>
</head>
<body>
<form action="" method="post">
    Hello
    <div class="input">
        <input type="text" name="customer" id="customer" />
        <label for="customer">(Customer name)</label>
    </div>,
    this is to inform you that the
    <div class="input">
        <input type="text" name="item" id="item" />
        <label for="item">(Item name)</label>
    </div>,
    you order is no longer available.
</form>
</body>
</html>
于 2010-04-29T20:07:14.067 回答
1

没有什么特别简单的事情浮现在我的脑海里。

我的替代方法是将默认输入值分别设置为“客户名称”和“项目名称”。使用少量 JavaScript，您可以在用户获得焦点时自动清除输入。如果在用户模糊输入时输入为空，则额外的洒水将用“客户名称”和“项目名称”重新填充输入。

警告：我对 JavaScript 及其跨浏览器兼容性问题知之甚少。例如，我认为getElementsByClassName在某些版本的 IE 中是没有实现的。以这段代码为例，而不是生产代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Inline form</title>
  <script type="text/javascript">
    var valueHints = []
    window.onload = function() {
      var inputs = document.getElementsByClassName("value-hint");
      for (var i = 0; i < inputs.length; ++i) {
        valueHints[inputs[i].id] = inputs[i].value;
        inputs[i].onfocus = function() {
          if (valueHints[this.id] == this.value) {
            this.value = "";
          }
        }
        inputs[i].onblur = function() {
          if (this.value == "") {
            this.value = valueHints[this.id];
          }
        }
      }
    }
  </script>
  <style type="text/css">
    .value-hint {
      color:#999999;
    }
  </style>
</head>
<body>
  <p>Hello <input class="value-hint" id="customer" type="text" value="Customer Name"></span>, This is to inform you that the <input class="value-hint" id="item" type="text" value="Item Name"> you ordered is no longer available.</p>
</body>
</html>
于 2010-04-29T19:47:29.560 回答