Home/ Questions/Q 8272753
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T07:14:13+00:00

I’ve looked around and I can’t find the solution for making a title appear

  • 0

I’ve looked around and I can’t find the solution for making a title appear when a form is focused. I’m probably missing something glaringly obvious (probably that it can’t be done with this selector).

Ideally I’d like to avoid jQuery and stick to CSS (more advanced CSS is fine) as I have no plans to support IE – I like to learn, but IE is too much of a pain to me.

This is my CSS at the moment:

#search-title {
    color: rgba(0, 0, 0, 0);
    font-size: 20px;
    font-weight: 300;
    margin-left: -30px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

input[type="text"]:focus #search-title {
    color: #F70;
    margin-left: 35px;
}

Thanks in advance,

Sam

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I have a solution that works purely with CSS but you are going to have to jiggle your html elements around a little bit.

    The only way to select another element that is not a descendant of a reference element (that I know of) is to use a sibling selector (general or adjacent). However, that solution relies on the reference element (the input) and the target (the title) being siblings in the dom hierarchy.

    Here’s a quick example : http://jsfiddle.net/7AaDc/1/

    For the record, the example uses the general sibling selector (~) but the adjacent (+) would work just as well in this case.

    Here is a much better explanation of sibling (and child) selectors : http://css-tricks.com/child-and-sibling-selectors/

    Here is a rundown of the compatibility issues associated with sibling selectors : http://caniuse.com/#search=sibling (tl;dr, pretty widely supported these days)

    • 0