使用HTML将静态文本放置在输入字段的末尾 [英] Placing static text at the end of an input field using HTML

问题描述

我想要做的是在输入字段的末尾放置一个静态文本。不是一个占位符，这个想法是在使用HTML和CSS的输入元素字段的末尾有类似@ gmail.com的东西。我的问题是如何实现？我从引导

解决方案

这里有一些东西让你去，基本上你会需要包装输入一个div和调整它的宽度是相同的输入（我这是通过浮动div，但有其他方式）。

HTML

 < div class =input-container> 
< input type =text/> 
< / div> 
  

CSS

  .input-container {
 position：relative; 
 float：left; 
} 
 
 .input-container：after {
 position：absolute; 
 right：0; 
 top：0; 
 content：'@ gmail.com'; 
} 
  

请参阅 this fiddle 。

注意，使用伪元素的纯CSS方法不会像此信息。

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "@gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.

For example the input field would look like..

I hope this makes sense.. If you have any questions feel free to ask.

This text should stay static as the user types, which is what seperates it from a input field.

Here's some code that I have:

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

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

解决方案

Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.

HTML

<div class="input-container">
    <input type="text"/>
</div>

CSS

.input-container {
    position: relative;
    float: left;
}

.input-container:after {
    position: absolute;
    right: 0;
    top: 0;
    content: '@gmail.com';
}

See this fiddle.

Note, the pure CSS way with pseudo-elements won't work as discussed in this post.

这篇关于使用HTML将静态文本放置在输入字段的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！