3

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

2xAA
  • 308
  • 3
  • 11
  • Where is the #search-title element in the DOM relative to the input? – Neil Jul 19 '12 at 23:26
  • @Neil - the header isn't relevant as such, the 'search-form' is floated to the right. It's a dummy at the moment, so no form actions etc. `

    Forums

    : Search

    `     – 2xAA Jul 19 '12 at 23:34
  • Then I don't think you can do that in pure CSS, as your selector can't select arbitrary DOM elements, it's limited to only selecting your younger siblings (via + and ~) and children (via > and space). – Neil Jul 19 '12 at 23:46

4 Answers4

6

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)

Ninjabiscuit
  • 134
  • 1
  • 10
  • This is exactly what I'm looking for! (well, near enough for me to take away and use) Thanks very much Ninja :D I did look at sibling selectors extremely briefly, but I didn't think it'd help me at the time. – 2xAA Jul 20 '12 at 00:48
1

You've used the descendant selector, which means “#search-title” must appear within your input element for it to match the rule — and that's clearly not going to happen.

There isn't actually a CSS selector which will match #search-title when your input is any particular state given how your document is structured.

Mo.
  • 934
  • 6
  • 8
0

Perhaps trying a div inside the form might do the trick

or, try One of these

bluelightning1
  • 279
  • 2
  • 6
0

Problem looks to me like you're trying to style an item that isn't nested, that is 

input[type="text"]:focus #search-title

says to style the element with id "search-title" when it is a child of an element that matches 'input[type="text"]:focus' but from the snippet you post, I'm guessing it's not actually a child in the DOM sense.

You can look at sibling style selectors (eg "A + B" matches item B but only when it has a preceding sibling that is A), particularly "~" might help, but if the elements are quite disparate in the DOM tree then you might have to do something tricky with restructuring your DOM, or fall back to javascript.

Tim
  • 916
  • 7
  • 21