輸入內部的標籤

-1

如何僅在移動設備中將輸入表單內的表單標籤放入？輸入內部的標籤

例如：

我的代碼：

<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>

來源

2017-08-22 Miguel Borges

'位置：absolute'？ – Huelfe

或者讓兩者都保持正常流動，並且只需在「他們周圍」（您周圍已經有一個分組元素）應用邊框和背景，而不是單個元素上。 – CBroe

像這樣的事情？我改變了HTML

.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>

來源

2017-08-22 09:27:33 Gerard

您可以使用像下面的方法input和label位置。我們寫的移動畫面風格與媒體查詢

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>

來源

2017-08-22 09:29:30

我只是增加了一個邊界form-group和覆蓋一些引導代碼。

僅用於移動設備，請嘗試使用CSS3 Media Queries。

你可以試試這個：

.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 */ 
 
}

<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>

來源

2017-08-22 09:51:36

輸入內部的標籤

回答

相關問題