Question

我遇到了工具提示的CSS问题。工具提示属于输入字段，如果选中其他复选框，则需要在输入字段上正确放置此工具提示。所以复选框是：

 <input type="checkbox" id="telefonBox" />

以及需要放置工具提示的输入字段：

<input type="text" class="form-control tooltip-berater" id="agentName"/>

我尝试的是

input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}

（基本上我想写：如果选中了这个id的复选框，那么在这个css类中做一些事情）但根本不起作用。我错过了什么？

Answer 1

如果两个输入都是同一div的子节点，但不是直接相邻（在HTML标记中），那么您需要使用~运算符而不是+。

+的作用类似于：

<div class="parent">
  <div class="first"></div>
  <div class="second></div>
</div

.first + .second {
  // do stuff with second
}

~的作用类似于：

<div class="parent">
  <div class="first"></div>
  <div class="inbetween"></div>
  <div class="second"></div>
</div

.first ~ .second {
  // you can still do stuff with second
}

在HTML标记中没有其他可能帮助您的选择器，尤其是：

当.second div放在.first
当.second div与.first

在这些情况下，您需要使用JavaScript来选择和更改元素的CSS。

Answer 2

这是一个小提琴，我改变了输入框的颜色：https://jsfiddle.net/8we5u1vs/

这是你想要的那种吗？显然它比你所说的要简单得多。你有很多代码需要添加很多代码，你可以在工具提示的例子中显示代码或小提琴吗？

input[id=telefonBox]:checked + .tooltip-berater {
    background-color:red;
}

Answer 3

您可以尝试这种方式，但仍可通过标签键输入文字输入。

＆＃13;

div {
  display: inline-block;
  position: relative;
  line-height: 1.25em;
  border: 1px solid;
  background: white;
}

input[type=text] {
  border: 1px solid white;
  line-height: inherit;
}

span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: none;
  border: 1px solid white;
  background: white;
}

input[type=checkbox]:checked + div span {
  display: block;
}

＆＃13;

<input type=checkbox>
<div>
  <input type=text>
  <span>N/A</span>
</div>

＆＃13;

如果选中复选框，如何操作输入字段

3 个答案: