Question

我有这个样本：

代码HTML：

<div class="input-box">
    <label for="option_159" class="required">
        Patient Name                                        <em>*</em>      
    </label>
    <input type="text" class="optionli-input input-text product-custom-option required-entry"  placeholder="Patient Name" >
</div>

我想创建像这样的东西

example

如何仅从CSS创建这样的示例？

你可以修改我的例子，所以我可以得到这样的东西吗？我想了解它是如何创建的。

提前致谢！

Answer 1

尝试以下代码：

＆＃13;

<form>
 <fieldset>
  <legend>Name:</legend>
   <input type="text"><br>
 </fieldset>
</form>

＆＃13;

Answer 2

这可以使用fieldset-legend完成

<div class="input-box">
<fieldset>
    <legend for="option_159" class="required">Patient Name <em>*</em></legend>
    <input type="text" class="optionli-input input-text product-custom-option required-entry"  placeholder="Patient Name" >
  </fieldset>	
</div>

Answer 3

使用此代码：

＆＃13;

 label{
  position: absolute;
  top: 20px;
  left: 15px;
  background-color: #fff;
  padding: 0px 5px;
  font-size: 12px;
 }
 input{
  padding: 10px;
  background-color: #fff;
 }

＆＃13;

 <div class="input-box">
	<label for="option_159" class="required">Patient Name<em>*</em></label>
 <br/>
	<input type="text" class="optionli-input input-text product-custom-option required-entry"  placeholder="Patient Name" / >
 </div>

＆＃13;

Answer 4

使用此：

＆＃13;

div {
    position: relative;
    margin: 50px;
}

div input[type] {
    border: 1px solid #ccc;
    outline: none;
    padding: 8px;
    width: 300px;
}

div label {
    position: absolute;
    top: -8px;
    left: 10px;
    background: #FFF;
    color: skyblue;
    font-size: 12px;
}

＆＃13;

<div>
    <label for="option_159">Patient Name<em>*</em></label>
    <input type="text"  id="option_159" placeholder="Patient Name">
</div>

＆＃13;

表格浮动标签

4 个答案: