我要做的是在输入字段的末尾放置一段静态文本。不是占位符,我们的想法是使用HTML和CSS在输入元素字段的末尾添加类似“@ gmail.com”的内容。我的问题是如何实现这一目标?我从引导程序validation states icons.
中得到了这个想法例如,输入字段看起来像..
我希望这是有道理的。如果您有任何问题可以随意提问。
这个文本应该在用户输入时保持静态,这是从输入字段中分离出来的。
以下是我的一些代码:
<form id="loginForm">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
</div>
<br>
<div class="form-group">
<input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
</div>
<br>
<span class="visible-lg">
<button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<span class="hidden-lg">
<button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<br>
</fieldset>
</form>
我的css:
.loginSpinner{
display: none !important;
}
#badLogin{
display: none;
}
#badRequest{
display: none;
}
#createAccountForm{
display: none;
}
.createSpinner{
display: none !important;
}
#forgotPassword{
display: none;
color: red;
}
#usernameField:before{
content:"@gmail.com";
background-color:yellow;
color:red;
font-weight:bold;
}
JSFiddle:http://jsfiddle.net/UMBRd/
答案 0 :(得分:3)
这里有一些让你前进的东西,基本上你需要将输入包装在div中并将其宽度调整为与输入相同(我通过浮动div来做到这一点,但还有其他方法)。这将为您提供一个坐标系,用于将伪元素放入您想要的文本中。
<div class="input-container">
<input type="text"/>
</div>
.input-container {
position: relative;
float: left;
}
.input-container:after {
position: absolute;
right: 0;
top: 0;
content: '@gmail.com';
}
请参阅this fiddle。
请注意,使用伪元素的纯CSS方式不会像this post中讨论的那样工作。
答案 1 :(得分:0)
我唯一能想到的就是使用absolute
和relative
定位来覆盖input
顶部的span
。它并不完美,我不得不稍微使用线高,但这可能足以让你开始:
HTML
<div>
<span>@gmail.com</span>
<input type="text" />
</div>
CSS
div {
position: relative;
}
span {
display: inline-block;
width: 200px;
position: relative;
line-height:95px;
text-align:right;
}
input {
position: absolute;
left: 10px;
top: 35px;
background-color: transparent;
width:200px;
height: 20px;
}