My dilemma involves attaching the clear button to the search input field, resulting in an unexpected outcome:
https://i.sstatic.net/igkpx.jpg
The issue seems to be linked to the "Black Dashboard PRO" theme that I am currently using.
<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>
This is the button's CSS as defined by the theme:
`.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;
}`