Using CSS change the background of the form only when one of the children receives the focus

Question

I am trying concepts of CSS selectors and want to change the background color of the form to lightblue only when one of the children receives the focus. I want to done this using CSS only. I don't want any type of JavaScript. Here the code :

*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
}
body {
    background: #f1f1f1;
    font-family: Arial, Helvetica, sans-serif;
    padding: 50px;
    color: #333;
}
form{
width:400px;
padding: 20px;
background-color:red;
margin:20px;
}
.label, .input {
    display: block;
}
label {
    margin-bottom: 3px;
}
input {
    display: block;
    padding: 5px;
    min-width: 350px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid rgb(116, 116, 116);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Selectors</title>
  </head>
  <body>
    <form>
      <h3>Express your tastes</h3>
      <label>Your favorite dish</label>
      <input type="text" />
      <label>Your favorite dessert</label>
      <input type="text" />
      <label>Your favorite pastry</label>
      <input type="text" />
    </form>
  </body>
</html>

**lucky you** someone did not flag it yet as a dupe alike **Is there a parent selector?** , hope it stays open because it really is not a dupe of that kind — G-Cyrillus, Sep 10 '21 at 18:46
@G-Cyrillus it's still a dupe because that question cover this case too: https://stackoverflow.com/a/46406959/8620333 — Temani Afif, Sep 10 '21 at 19:53
do not see here a matter of parent selector because it is about a form and a need to show that you stand right in it ! ;) Of course if you decide to use a form that has no action and only for a CSS trick, okay, that's a workaround for the dupe. It would probably be nice to have a real dupe covering the form case . *hard to find if you don't know what to look for?* — G-Cyrillus, Sep 10 '21 at 20:26
@G-Cyrillus "parent selector" is only the title, that question evolved a lot to become a generic one about child -> parent interaction and it covers a lot of cases. We don't close question based on the title but on the answers content. The fact that :focus-within is used there (in two answers and one of them using input https://stackoverflow.com/a/56897698/8620333) is enough for the OP to get his answer. — Temani Afif, Sep 10 '21 at 20:37
@G-Cyrillus i have searched about it on google but no reference from any site even no reference from stackoverflow. that's why i have asked this question. i really don't know that this question had already asked by someone — m-naeem66622, Sep 11 '21 at 04:31

score 2 · Answer 1 · answered Sep 10 '21 at 18:33

2

You may want to use :focus-within pseudo-class. For your example, you have to add:

form:focus-within {
   background-color: lightblue;
}

More you can read about this selector here

answered Sep 10 '21 at 18:33

Adrian Kokot

2,172
2
5
18

if i want to change background according to :hover on the child element then what can i use? – m-naeem66622 Sep 10 '21 at 18:39
When there's hover on a child, there's also hover on a parent, so you can use `form:hover` to do that. Unless you want to select hover on a specific child. – Adrian Kokot Sep 10 '21 at 18:47

score 2 · Accepted Answer · answered Sep 10 '21 at 18:34

You can use CSS pseudo-class :focus-within

defn:

The :focus-within pseudo-class matches elements that either themselves match :focus or that have descendants which match :focus.

Wroking Example

*,
 ::before,
 ::after {
  box-sizing: border-box;
  padding: 0;
}

body {
  background: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  padding: 50px;
  color: #333;
}

form {
  width: 400px;
  padding: 20px;
  background-color: red;
  margin: 20px;
}

form:focus-within {
  background-color: lightblue;
}

.label,
.input {
  display: block;
}

label {
  margin-bottom: 3px;
}

input {
  display: block;
  padding: 5px;
  min-width: 350px;
  margin-bottom: 10px;
  border-radius: 3px;
  border: 1px solid rgb(116, 116, 116);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Selectors</title>
</head>

<body>
  <form>
    <h3>Express your tastes</h3>
    <label>Your favorite dish</label>
    <input type="text" />
    <label>Your favorite dessert</label>
    <input type="text" />
    <label>Your favorite pastry</label>
    <input type="text" />
  </form>
</body>

</html>

if i want to change background according to :hover on the child element then what can i use? — m-naeem66622, Sep 10 '21 at 18:38
CSS as by full form means cascading style sheets, which means it does not work from bottom to up. Having said that there can be some workaround for hover. have a look at this answer: https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element — Tushar Gupta, Sep 10 '21 at 18:42

Using CSS change the background of the form only when one of the children receives the focus

2 Answers2