输入中的标签

Question

如何仅在移动设备上将表单标签放入输入表单中？

示例：

我的代码：

<form>
    <div class="form-group">
        <label class="form-control-label" for="firstName">Firstname</label>
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
    </div>
    <div class="form-group">
        <label class="form-control-label" for="lastName">Lastname</label>
        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
    </div>

    <div class="form-group">
        <label class="form-control-label" for="phone_number">Mobile Number</label>
        <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
    </div>
</form>

Answer 1

这样的东西？我在HTML

中更改了input和label的位置

.form-group {
  position: relative;
  min-height: 3.5em;
}

input.form-control {
  height: 3em;
  position: absolute;
  top: 0;
  left: 0;
}

label.form-control-label {
  position: absolute;
  font-size: .8em;
  top: 0;
  left: 5px;
  text-transform: uppercase;
}

<form>
  <div class="form-group">
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
    <label class="form-control-label" for="firstName">Firstname</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
    <label class="form-control-label" for="lastName">Lastname</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
    <label class="form-control-label" for="phone_number">Mobile Number</label>
  </div>
</form>

Answer 2

您可以使用如下方法。我们必须在媒体查询中编写移动屏幕样式

body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}

@media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;

}
}

<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>

Answer 3

我刚刚为form-group添加了边框并覆盖了一些引导代码。

仅限移动设备，请尝试使用CSS3 Media Queries。

你可以试试这个：

＆＃13;

＆＃13;

.form-group {
  border: 1px solid black; /* Change border width and color here */
}

/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
  border: none !important; /* No border for input */
  box-shadow: none !important; /* No border for input */
}

.form-control:focus {
  box-shadow: none !important; /* Remove the blue shining at focus */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <label class="form-control-label" for="firstName">Firstname</label>
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
  </div>
  <div class="form-group">
    <label class="form-control-label" for="lastName">Lastname</label>
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
  </div>

  <div class="form-group">
    <label class="form-control-label" for="phone_number">Mobile Number</label>
    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;