Question

以下是我的代码：

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
 <input type="text" name="username" id="username" placeholder="Username" data-wrapper-class="controlgroup-textinput ui-btn">
 <input type="password" name="password" id="password" placeholder="Password" data-wrapper-class="controlgroup-textinput ui-btn">
 </fieldset>

我的问题是我想在输入文本字段中添加像fa-user和fa-lock这样的字体真棒图标，如下图所示，而不是占位符文本！这两个输入应该在对照组中。

下面的

是样本输出的网址 http://www.gfi.com/~/media/Images/GFI/Products/Downloads/Mobile%20app/Android/login.ashx

Answer 1

演示：http://jsfiddle.net/lotusgodkk/GCu2D/389/

HTML：

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
    <label> <i class="fa fa-user"></i>

        <input type="text" name="username" id="username" placeholder="Username" data-wrapper-class="controlgroup-textinput ui-btn" />
    </label>
    <label><i class="fa fa-lock"></i>

        <input type="password" name="password" id="password" placeholder="Password" data-wrapper-class="controlgroup-textinput ui-btn" />
    </label>
</fieldset>

CSS：

body, html {
    width:100%;
    height:100%;
    background:#0079C1
}
fieldset {
    margin:0 auto;
    border:none;
    display:inline-block;
}
label {
    display:block;
    background:#FFF;
    padding:10px;
}
label:first-child {
    border-radius:4px 4px 0 0;
    border-bottom:1px solid #BFBFBF;
}
label:last-child {
    border-radius:0 0 4px 4px;
}
label i, label input {
    display:inline-block;
    vertical-align:middle;
    border:none;
    background:inherit;
    color:#BFBFBF
}
label i {
    width:20px;
    font-size:20px
}
label input {
    padding:5px;
    width:200px
}

您需要稍微修改一下html。由于您需要fontawesome图标，您将不得不使用额外的标签。这可以通过使用背景图像来完成，但为此你不能使用fontawesome。

控制组文本框内的字体真棒图标

1 个答案: