Html 按钮未正确连接到输入
我试图将“清除”按钮附加到输入搜索,但我得到了一个非常奇怪的结果,特别是: 我怀疑这个问题与我使用的Black Dashboard PRO的主题有关Html 按钮未正确连接到输入,html,css,bootstrap-4,Html,Css,Bootstrap 4,我试图将“清除”按钮附加到输入搜索,但我得到了一个非常奇怪的结果,特别是: 我怀疑这个问题与我使用的Black Dashboard PRO的主题有关 <form> <div class="input-group"> <input id="customer-search" type="text" class="key form-control" placeholder="Search"> <span class="i
<form>
<div class="input-group">
<input id="customer-search" type="text" class="key form-control" placeholder="Search">
<span class="input-group-addon">
<div>
<button class="clear btn btn-default" type="button" title="Clear">
<span class="tim-icons icon-simple-remove"></span>
</button>
</div>
</span>
</div>
</form>
删除“.btn、.navbar.navbar nav>a.btn”的边距 文件 .btn:not:disabled:not.disabled{ 光标:指针; } 按钮,html[类型=按钮],[类型=重置],[类型=提交]{ -webkit外观:按钮; } .btn{ 光标:指针; } .btn、.navbar.navbar导航>a.btn{ 边框宽度:2倍; 边界:无; 位置:相对位置; 溢出:隐藏; 边界半径:0.4285雷姆; 光标:指针; 背景:344675; 背景图像:左下角线性渐变,344675263148344675; 背景大小:210%210%; 背景位置:右上角; 背景色:344675; 过渡:所有0.15秒缓解; 盒影:无; 颜色:ffffff; } .btn默认值{ 颜色:ffffff; 背景色:344675; 边框颜色:344675; 盒影:0 4px 6px rgba50,50,93,0.11,0 1px 3px rgba0,0,0,0.08; } .btn{ 显示:内联块; 字号:600; 文本对齐:居中; 空白:nowrap; 垂直对齐:中间对齐; -webkit用户选择:无; -moz用户选择:无; -ms用户选择:无; 用户选择:无; 边框:1px实心透明; 填充:11px 40px; 字体大小:0.875rem; 线高:1.35em; 边界半径:0.25雷姆; 过渡:颜色0.15s缓入缓出,背景色0.15s缓入缓出,边框色0.15s缓入缓出,框影0.15s缓入缓出; } X
我想你们只需要去掉那个按钮的边距就可以了。见演示 .btn:not:disabled:not.disabled{ 光标:指针; } 按钮,html[类型=按钮],[类型=重置],[类型=提交]{ -webkit外观:按钮; } .btn{ 光标:指针; } .btn、.navbar.navbar导航>a.btn{ 边框宽度:2倍; 边界:无; 位置:相对位置; 溢出:隐藏; 保证金:4px 1px; 边界半径:0.4285雷姆; 光标:指针; 背景:344675; 背景图像:左下角线性渐变,344675263148344675; 背景大小:210%210%; 背景位置:右上角; 背景色:344675; 过渡:所有0.15秒缓解; 盒影:无; 颜色:ffffff; } .btn默认值{ 颜色:ffffff; 背景色:344675; 边框颜色:344675; 盒影:0 4px 6px rgba50,50,93,0.11,0 1px 3px rgba0,0,0,0.08; } .btn{ 显示:内联块; 字号:600; 文本对齐:居中; 空白:nowrap; 垂直对齐:中间对齐; -webkit用户选择:无; -moz用户选择:无; -ms用户选择:无; 用户选择:无; 边框:1px实心透明; 填充:11px 40px; 字体大小:0.875rem; 线高:1.35em; 边界半径:0.25雷姆; 过渡:颜色0.15s缓入缓出,背景色0.15s缓入缓出,边框色0.15s缓入缓出,框影0.15s缓入缓出; } .没有边际{ 保证金:0; } 引导示例 您的默认代码有问题 X 从按钮上删除边距后 X 更改HTML& 在span输入组append上添加类
@我明白了,删除“.btn,.navbar.navbar nav>a.btn”的边距
`.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
.btn {
cursor: pointer;
}
.btn, .navbar .navbar-nav > a.btn {
border-width: 2px;
border: none;
position: relative;
overflow: hidden;
margin: 4px 1px;
border-radius: 0.4285rem;
cursor: pointer;
background: #344675;
background-image: linear-gradient(to bottom left, #344675, #263148, #344675);
background-size: 210% 210%;
background-position: top right;
background-color: #344675;
transition: all 0.15s ease;
box-shadow: none;
color: #ffffff;
}
.btn-default {
color: #ffffff;
background-color: #344675;
border-color: #344675;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.btn {
display: inline-block;
font-weight: 600;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 11px 40px;
font-size: 0.875rem;
line-height: 1.35em;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}`
<div class="input-group">
<input id="customer-search" type="text" class="key form-control" placeholder="Search">
<span class="input-group-append">
<button class="clear btn btn-default" type="button" title="Clear">
<span class="tim-icons icon-simple-remove">X</span>
</button>
</span>
</div>