相关疑难解决方法(0)

我想做的是将一段静态文本放置在输入字段的末尾。不是占位符，其想法是使用 HTML 和 CSS 在输入元素字段的末尾添加类似“@gmail.com”的内容。我的问题是如何实现这一点？我从引导验证状态图标中得到了这个想法。

例如，输入字段看起来像..

我希望这是有道理的..如果您有任何问题，请随时提出。

当用户键入时，该文本应保持静态，这就是它与输入字段的区别。

这是我的一些代码：

<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;
} …