需要 bootstrap 输入框背景图片为 "full bleed",无边框
Need bootstrap input field background image to be "full bleed", no border
我有这个表格:
无论我制作的图像有多大,或者我 fiddle 字段的大小有多大,白色边框始终存在。我该怎么做才能使白色边框不在每个输入字段左侧的蓝色图标的顶部、左侧和底部周围。
这里是 HTML:
<form role="form" class="">
<fieldset class="">
<div class="form-group">
<input type="email" class="form-control no-shadow margin-bottom20 email-field form-group" id="InputEmail" placeholder="email" required="" style="border-radius:0px;">
<input type="password" class="form-control no-shadow password-field" id="InputPassword" placeholder="password" required="" style="border-radius:0px;">
<button type="submit" class="btn margin-top45 btn-lg bg-transparent bg-transparent-hover no-shadow text-center" data-toggle="tooltip" style="border : solid 3px #99cc33;color:#ffffff;">Log In</button>
</div>
</fieldset>
</form>
这里是 CSS:
.email-field
{
background-image: url('../images/email-input-icon.png');
background-repeat: no-repeat;
background-position: null;
background-clip: border-box;
}
.password-field
{
background-image: url('../images/password-input-icon.png');
}
.margin-bottom20
{
margin-bottom: 20px !important;
}
.form-control
{
color: #34495e;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.form-group
{
position: relative;
margin-bottom: 20px;
}
.form-group.focus .form-control, .form-control:focus
{
border-color: #1abc9c;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control, .form-control:focus {
border-color:Transparent;
}
我有这个表格:
无论我制作的图像有多大,或者我 fiddle 字段的大小有多大,白色边框始终存在。我该怎么做才能使白色边框不在每个输入字段左侧的蓝色图标的顶部、左侧和底部周围。
这里是 HTML:
<form role="form" class="">
<fieldset class="">
<div class="form-group">
<input type="email" class="form-control no-shadow margin-bottom20 email-field form-group" id="InputEmail" placeholder="email" required="" style="border-radius:0px;">
<input type="password" class="form-control no-shadow password-field" id="InputPassword" placeholder="password" required="" style="border-radius:0px;">
<button type="submit" class="btn margin-top45 btn-lg bg-transparent bg-transparent-hover no-shadow text-center" data-toggle="tooltip" style="border : solid 3px #99cc33;color:#ffffff;">Log In</button>
</div>
</fieldset>
</form>
这里是 CSS:
.email-field
{
background-image: url('../images/email-input-icon.png');
background-repeat: no-repeat;
background-position: null;
background-clip: border-box;
}
.password-field
{
background-image: url('../images/password-input-icon.png');
}
.margin-bottom20
{
margin-bottom: 20px !important;
}
.form-control
{
color: #34495e;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.form-group
{
position: relative;
margin-bottom: 20px;
}
.form-group.focus .form-control, .form-control:focus
{
border-color: #1abc9c;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control, .form-control:focus {
border-color:Transparent;
}