CSS: Styling the appearance of the input div

Question

CSS: Styling the appearance of the input div

Here is the code I am working with:

<div class="lighter">
  <form method="get" action="http://www.google.pl" id="search">
    <span>
      <input id="button_search" type="image" src="images/search.png" id="button_search"/>
    </span>
    <span>
      <input type="text" class="search rounded" placeholder="Search...">
    </span>
    <div class= "list_search">
      <ul>
        <li class="search_link"><a href="">Search all of Movies</a></li>
        <li class="search_link"><a href="">Advanced Search</a></li>
      </ul>
    </div>
  </form>
</div>

I am wondering if it is possible to use only CSS to make the list_search appear when the input type="text" is in focus. If so, how can this be achieved?

Thank you for your assistance.

css focus

Answer 1

Answer №1

If you adjust your HTML structure slightly, it is possible to achieve this effect using only CSS.

div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px; }

input:focus + div { display: block; }

The key here is to initially hide the div, and then when the input field gains focus, the immediately following sibling div will change its display property to block.

In order for this technique to work, the targeted element must be the immediate next sibling, as traversing up the DOM tree is not possible. This means that you should separate the input from the span.

You can view a demonstration of this on my fiddle: http://jsfiddle.net/TheNix/U28sd/

UPDATE:
The "adjacent selector" (+) should be compatible with IE7 and newer versions (though there may be issues with asynchronously loaded content). Keep in mind that the targeted element must directly follow the trigger element, so it's not just "the next matching Y element", but specifically "the element right after X, IF it matches Y".

In some cases, if you are familiar with the markup and willing to experiment, you can "count" your way through elements. For instance, input + div + div would select the second div (assuming the markup remains unchanged). However, this approach is not recommended because any alterations to the markup could break the styling and complicate maintenance.

For more information on CSS selectors, refer to: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Answer 2

If you adjust your HTML structure slightly, it is possible to achieve this effect using only CSS.

div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px; }

input:focus + div { display: block; }

The key here is to initially hide the div, and then when the input field gains focus, the immediately following sibling div will change its display property to block.

In order for this technique to work, the targeted element must be the immediate next sibling, as traversing up the DOM tree is not possible. This means that you should separate the input from the span.

You can view a demonstration of this on my fiddle: http://jsfiddle.net/TheNix/U28sd/

UPDATE:
The "adjacent selector" (+) should be compatible with IE7 and newer versions (though there may be issues with asynchronously loaded content). Keep in mind that the targeted element must directly follow the trigger element, so it's not just "the next matching Y element", but specifically "the element right after X, IF it matches Y".

In some cases, if you are familiar with the markup and willing to experiment, you can "count" your way through elements. For instance, input + div + div would select the second div (assuming the markup remains unchanged). However, this approach is not recommended because any alterations to the markup could break the styling and complicate maintenance.

For more information on CSS selectors, refer to: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Answer 3

Answer №2

For those who are new to JavaScript, I recommend using jQuery for its simplicity and ease of use.

$(':input').focus(function(event){
    $('.search_results').toggle();
}).blur(function(event){
    $('.search_results').toggle();
});

Answer 4

For those who are new to JavaScript, I recommend using jQuery for its simplicity and ease of use.

$(':input').focus(function(event){
    $('.search_results').toggle();
}).blur(function(event){
    $('.search_results').toggle();
});

CSS: Styling the appearance of the input div

Answer №1

Answer №2

Similar questions

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

Choosing changeable object label in CSS

Attempting to trigger the timer to begin counting down upon accessing the webpage

How to incorporate multiple fonts into spark RichText using CSS - Flex edition!

Utilizing Font-face and background images in asset-pipeline plugin: A comprehensive guide

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

What steps can be taken to avoid an input with a width of 100% from overflowing?

Adding a stylish underline to text using HTML and CSS

How to make a letter stretch all the way down the paper?

The background color and image failed to cover the entire CSS box model

unable to decrease the gap between the rows of the table

The Jumbotron and background images vanish as the window size transitions from full screen to smaller dimensions

Animation of two divs stacked on top of each other

Trouble with CSS Styling in Implementation of Website on Heroku

The slider feature on Google Reviews is currently not functioning properly with the owl carousel

Continuous horizontal columns

Boundary around an object within a unified picture

Initial row of divs impacted by stepdown process

Prevent Copying and Pasting within the Text Editor

Fashioning PHP using CSS