Question

这是我的链接： http://jsfiddle.net/sanand29/Leo63eud/

<input type="text" placeholder="your email" class="email" />

.email {
    background-image:url('assets/images/email.png');
    background-repeat:no-repeat;
    background-position:right;
    width:100%;
    padding: 10px;
    margin: 15px 0;
    border:0px solid #7ac9b7;
    background: none repeat scroll 0 0 transparent !important;
    border-bottom:2px solid red!important;
}

一半的线应该是红色而另一半是灰色的，也是图像图标没有显示..我没有得到..请帮助

Answer 1

图片无法显示，因为您在电子邮件样式底部将背景设置为无。这一行background: none repeat scroll 0 0 transparent !important;

我离开了输入的background-color，以便更清楚地了解边框。您只需将此行background-color: #dcdcdc;更改为background-color: transparent;

即可

DEMO
DEMO2 (with icon image)

<div class="input-container">
    <input type="text" placeholder="your email" class="email" />
    <div class="input-container_border-red"></div>
    <div class="input-container_border-gray"></div>
</div>

.input-container {
    position: relative;
    padding-bottom: 2px;
    width: 100%;
}

.input-container_border-red {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 2px;
    background-color: red;
}

.input-container_border-gray {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 2px;
    background-color: gray;
}

.email {
    background-image:url('/assets/images/email.png');
    background-repeat:no-repeat;
    background-position:right;
    background-color: #dcdcdc;
    width:100%;
    padding: 10px;
    margin: 15px 0 0 0;
    border:none;
    box-sizing: border-box;
}

使文本框透明并获得半边框颜色

1 个答案: