Question

谁能帮我修改CSS代码来完成图1到图2的效果，我想把图文章框设为图2样式，我应该如何修改CSS代码。以下是CSS和HTML代码。

 .username{
        margin-top: 10px;
        width: 280px;
        height:48px;
        background-color: green;

    }

    .blanline{
        width: 280px;
        height:23px;
        background-color: #F0FFFF;
    }

    .password{
        width: 280px;
        height:48px;
        background-color: green;
    }
    div input,button{
        width: 100%;
        height: 100%;
        font-size: 25px;

    }
    <div class="username">
                                <input type="text" id="username" name="username">
                            </div>
                            <div class="blanline"></div>
                            <div class="password">
                                <input type="password" id="password" name="password">
                            </div>

谁能帮助我，我会感激你的。

Answer 1

我认为您只是询问placeholder：JS Fiddle

<input type="text" id="username" name="username" placeholder="placeholder here">

设置占位符文字的样式：

::-webkit-input-placeholder {
    color: #ddd;
    font-weight: 100;
    font-size:16px;
    line-height: 28px;
}
:-moz-placeholder {
    /* Firefox 18- */
    color: #ddd;
    font-weight: 100;
    font-size:16px;
    line-height: 28px;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: #ddd;
    font-weight: 100;
    font-size:16px;
    line-height: 28px;
}
:-ms-input-placeholder {
    color: #ddd;
    font-weight: 100;
    font-size:16px;
    line-height: 28px;
}

Answer 2

HTML code：

<div class="username">
  <input type="text" id="username" name="username" placeholder="Name">
</div>
<div class="blanline"></div>
  <input type="password" id="password" name="password" placeholder="Password">
</div>

CSS代码：

.username{
    margin-top: 10px;
    width: 280px;
    height:48px;
    background-color: green;

}

.blanline{
    width: 280px;
    height:23px;
}

.password{
    width: 280px;
    height:48px;
    background-color: green;
}
div input,button{
    width: 100%;
    height: 100%;
    font-size: 25px;

}

Answer 3

您应在placeholder代码中添加input。

<input type="text" id="username" name="username" placeholder="text here">
<input type="password" id="password" name="password" placeholder="text here>

如何将文本框中的字符集合成一个文本框图2的效果？

3 个答案: