-1

I must be doing something wrong, but I can't find why. Here's the fiddle

Why does this work:

#searchClubsForm input[type=text]:focus {
    background: blue;
}

But this doesn't?

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}
9
  • 6
    You are missing a comma Aug 29, 2013 at 17:00
  • 5
    This question appears to be off-topic because it is about typo
    – Mr. Alien
    Aug 29, 2013 at 17:03
  • Are you looking to change the background color of the submit button when focus has been applied to the text input? Aug 29, 2013 at 17:03
  • No that's not what i want. I don't want the background: blue to be applied to #searchClubsForm input[type=submit] on focus over the text field.
    – bicycle
    Aug 29, 2013 at 17:03
  • 1
    Ah, I see. IMO the best way to do this would be to use Javascript/Jquery. There may be a CSS method, I'll try working on something and post below if it works. Aug 29, 2013 at 17:05

5 Answers 5

7

Ok, so you'll want to change this:

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

To this:

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}

This uses the adjacent sibling selector to style the button at the time of focus.

http://fiddle.jshell.net/mMJZ8/2/

1
  • yep that was the thing i was looking for
    – bicycle
    Aug 29, 2013 at 17:18
2

You can style a child element on focus or hover of a parent element, but input[type=submit] is not a child element of input[type=text] and hence the current sample is not possible.

You should instead try using the adjacent sibling selector like below:

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}
4
  • It's possible using the adjacent sibling selector Aug 29, 2013 at 17:17
  • 1
    ah, I was updating it mate. I meant the one shown in question is not possible :)
    – Harry
    Aug 29, 2013 at 17:18
  • I'm just too quick for you! lol Aug 29, 2013 at 17:19
  • 1
    I appreciate it, I leveled you out too, seems there was a lot of down-voting in this question for some reason... Aug 29, 2013 at 17:21
1

You are missing a comma between the two selectors. The way you are currently targeting it would mean that you have an input inside an input, which isn't possible.

#searchClubsForm input[type=text]:focus, #searchClubsForm input[type=submit] {
    background: blue;
}
1
  • Why would i want to put a comma there? Dryden just showed that what i want is just perfectly normal
    – bicycle
    Aug 29, 2013 at 17:19
0

Missing a comma:

#searchClubsForm input[type=text]:focus, #searchClubsForm input[type=submit] {
    background: blue;
}
1
  • No why? I don't want a comma there
    – bicycle
    Aug 29, 2013 at 17:17
-4

You need to do this with Jquery:

$('#searchClubsForm input[type=text]').focus(function () {
    $('#searchClubsForm input[type=submit]').css({
        'background': 'blue'
    });
});
$('#searchClubsForm input[type=text]').blur(function () {
    $('#searchClubsForm input[type=submit]').css({
        'background': '#F0F0EE'
    });
});

http://fiddle.jshell.net/mMJZ8/3/

Make sure you have a js file though

1
  • 2
    -1 jQuery is not a solution. This can be accomplished cross-browser with CSS 2.1.
    – Dan Lugg
    Aug 29, 2013 at 17:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.