HTML

<div>
    <input type="text" />
</div>

CSS

div {
    overflow: hidden;
    background-color: blue;
}
div * {
    position: relative;
    z-index: 10;
}
div input[type=text]:focus {
    background-color: red;
    box-shadow: 0 0 10000px 10000px lime;
    z-index: 5;
}

Answer 2

CSS 仅方法

<强>小提琴

http://jsfiddle.net/GT5sT/

<强> CSS

input {
    position: relative;
    z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
    position: relative;
    background-color: blue;
}
div.background-hack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

<强> HTML

<div>
    <input />
    <div class="background-hack"></div>
</div>

Answer 3

您必须使用javascript。

这是一个使用jquery的简短脚本。

$('#input').focus(function(){
  $('#box').css('background-color','red');
});

这假设您的输入的ID为input，蓝框的ID为box。

Answer 4

我认为你不能在纯CSS中做到这一点，但你可以使用Javascript：

http://jsbin.com/uvon/1/edit?html,js,output

var input = document.getElementById('input');
var div = document.getElementById('div');

input.onfocus = function(){
  input.style.backgroundColor = "red";
  div.style.backgroundColor = "red";
}

input.onblur = function(){
  input.style.backgroundColor = "white";
  div.style.backgroundColor = "blue";
}

Answer 5

jQuery方法将使用.parent（）

<script>$("p").parent(".selected").css("background", "yellow");</script>

http://api.jquery.com/parent/

Answer 6

javascript也可以在这里查看下面的代码，它比仅使用css更灵活

<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction(){
      document.getElementById('box').style.background="red";

    }
  </script>  
<title>JS Bin</title>
</head>
<body>
  <div id="box" style="background-color:blue">
    <input onfocus="myFunction()" />
  </div>
</body>
</html>

Css改变父母的颜色

6 个答案:

HTML

CSS