CODEWITHSUNDEEP
htmlcss
JT 1114
JT 1114

Reputation: 73

Hiding submit button with CSS when input field is focused

Problem: I want to have the submit button of my search box (HTML Form) to be hidden until the user clicks into the text input box.

HTML:

<div class="views-exposed-form">
 <div class="views-exposed-widgets clearfix">
  <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
   <div class="views-widget">
    <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
     <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
    </div>
   </div>
  </div>
  <div class="views-exposed-widget views-submit-button">
   <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">   
  </div>
 </div>
</div>

What I have tried I know you can use at least some type of conditions when working with CSS. Like this right here: how-to-affect-other-elements-when-a-div-is-hovered

My problem now is that my elements are not directly inside of each other. I already played around with something like showing the button when hovering over wrapper div.

It is hidden like this: 

#block-views-exp-display-products-page .views-submit-button {
  visibility: hidden;
}

What I actually need now is something like this: 

#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
  visibility: visible;
}

But I dont know how to do that.

Edit:

In case anyone comes across this, this is my final solution: 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('click', function(){
         $("#edit-submit-display-products").css("visibility", "visible");
      });
   });
</script>
<script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('focusout', function(){
        if (!$("#edit-submit-display-products").is(":hover")) {
          $("#edit-submit-display-products").css("visibility", "hidden");
          }
      });
   });
</script>

This will hide the button whenever you click outside of the input field and prevents the button from disappearing when trying to click on it.

Upvotes: 3

Views: 4112

Answers (2)

David
David

Reputation: 1184

You could add Javascript (jquery) to solve this problem:

<script src="code.jquery.com/jquery-latest.min.js"></script>

<script>
 $(document).ready(function() {
    $("#edit-search-api-views-fulltext").on('click', function(){
       $("#edit-submit-display-products").css("visibility", "visible");
    });
 });
</script>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115374

You can leverage :focus-within.

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

MDN

Support is non-IE/Edge though.

Something like:

.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within + .views-submit-button input {
  visibility: visible
}


.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within+.views-submit-button input {
  visibility: visible
}
<div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
    <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
      <div class="views-widget">
        <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
          <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
        </div>
      </div>
    </div>
    <div class="views-exposed-widget views-submit-button">
      <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
    </div>
  </div>
</div>

Upvotes: 7

Related Questions