Question

我有这个元素：

<span class="input" tabindex="1">&euro;<input type="text"></span>

使用这个CSS：

.input {
  background: #FFF;
  padding: 5px 10px;
}
.input input {
  border: 0;
  background: #FFF;
  padding-left: 5px;
}
.input input:focus {
  outline: none;
}
.input:focus {
  outline: 1px solid yellow;
}

我的问题是，如果我点击元素的边框或€符号，则会勾勒出元素的轮廓，但如果我在输入框内单击，则元素不会被勾勒出来。< / p>

有一种只有CSS的方法可以解决这个问题吗？

PS：

如果我想要一个JS解决方案，我会像现在这样使用它：

$(".input input").focus(
  function() {
    $(this).parent().addClass("focus");
  }).blur( function() {
    $(this).parent().removeClass("focus");
  }
);

但我正在寻找一种纯粹的CSS解决方案。

Answer 1

据我所知，纯CSS无法实现。你想要的是一个“父”选择器，它在CSS2或CSS3中不存在。根据{{3}}，有可能在CSS4规范中定义一个主题，直到所有（主要）浏览器都可以使用JavaScript。

jQuery的方法可能如下所示：

$('.input input').focus(
  function() {
    $(this).parent().css("outline", "1px solid yellow");
  }).blur(
  function() {
    $(this).parent().css("outline", "none");
  }
);

this answer

如何勾勒假输入元素？

1 个答案: