I was under the impression the inline styles override !important, but in this case that doesn’t appear to be true. Why am I seeing this behavior?
.search-block-form {
display: none !important;
}<div class="search-block-form" role="search" style="display: block;">
<form action="/search/node" method="get">
<div>
<label for="edit-keys" class="visually-hidden">Search</label>
<input title="Enter the terms you wish to search for." type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search">
</div>
<div>
<input type="submit" id="edit-submit" value="Search">
</div>
</form>
</div> .search-block-form {
display: none;
} <div class="search-block-form" role="search" style="display: block;">
<form action="/search/node" method="get">
<div>
<label for="edit-keys" class="visually-hidden">Search</label>
<input title="Enter the terms you wish to search for." type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search">
</div>
<div>
<input type="submit" id="edit-submit" value="Search">
</div>
</form>
</div>