使用：重点风格的外部div？
当我开始在textarea中写文本时，我想让外部的div和一个类框一起使边框变成实心的，而不是虚线，但不知何故：这种情况下焦点不适用。 如果它适用于：主动，它怎么不适用：焦点？
任何想法为什么？
（注意：我希望DIV的边框变成固定的，而不是textareas）
div.box { width: 300px; height: 300px; border: thin dashed black; } div.box:focus{ border: thin solid black; } <div class="box"> <textarea rows="10" cols="25"></textarea> </div> 虽然这不能用CSS / HTML来实现，但可以通过JavaScript来实现（不需要库）：
var textareas = document.getElementsByTagName('textarea'); for (i=0;i<textareas.length;i++){ // you can omit the 'if' if you want to style the parent node regardless of its // element type if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') { textareas[i].onfocus = function(){ this.parentNode.style.borderStyle = 'solid'; } textareas[i].onblur = function(){ this.parentNode.style.borderStyle = 'dashed'; } } }
JS小提琴演示 。
顺便说一句，对于像jQuery这样的库，上面的内容可以被压缩到：
$('textarea').focus( function(){ $(this).parent('div').css('border-style','solid'); }).blur( function(){ $(this).parent('div').css('border-style','dashed'); });
JS小提琴演示 。
参考文献：
-
getElementsByTagName()。 -
onfocus。 -
onblur。 -
parentNode。 -
tagName。 -
toString()。 -
toLowerCase()。 -
style。 -
focus()。 -
blur()。 -
parent()。 -
css()。
如果设置了tabindex属性， DIV元素可以获得焦点。 这是一个工作的例子。
#focus-example > .extra { display: none; } #focus-example:focus > .extra { display: block; }
<div id="focus-example" tabindex="0"> <div>Focus me!</div> <div class="extra">Hooray!</div> </div>
其他海报已经解释了为什么:focus伪类是不够的，但最后是一个基于CSS的标准解决scheme。
CSSselect器级别4定义了一个新的伪类：
：焦点之内
来自MDN ：
:focus-withinCSS伪类内匹配:focus伪类匹配的任何元素或者具有:focus伪类匹配的后代。 （这包括影子树中的后代）
所以现在使用:focus-within伪类 – 当textarea被点击时造型外部div变得微不足道。
div.box:focus-within { border: thin solid black; }
div.box { width: 300px; height: 300px; border: thin dashed black; } div.box:focus-within { border: thin solid black; }
<p>The outer box border changes when the textarea gets focus.</p> <div class="box"> <textarea rows="10" cols="25"></textarea> </div>
简单的使用JQuery。
$(document).ready(function() { $("div .FormRow").focusin(function() { $(this).css("background-color", "#FFFFCC"); $(this).css("border", "3px solid #555"); }); $("div .FormRow").focusout(function() { $(this).css("background-color", "#FFFFFF"); $(this).css("border", "0px solid #555"); }); });
.FormRow { padding: 10px; }
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div style="border: 0px solid black;padding:10px;"> <div class="FormRow"> First Name: <input type="text"> <br> </div> <div class="FormRow"> Last Name: <input type="text"> </div> </div> <ul> <li><strong><em>Click an input field to get focus.</em></strong> </li> <li><strong><em>Click outside an input field to lose focus.</em></strong> </li> </ul> </body> </html>
根据规格 ：
:focus伪类适用于元素具有焦点（接受键盘事件或其他forms的文本input）。
<div>不接受input，所以它不能有:focus 。 而且，CSS不允许你在一个元素上设置样式，这个元素是基于它的后代的目标。 所以你不能真的这样做，除非你愿意使用JavaScript。
你可以selectdiv标签。 只需添加一个选项卡索引到div。 最好使用jQuery和CSS类来解决这个问题。 这里有一个在IE，Firefox和Chrome中testing的工作示例（最新版本…没有testing旧的）。
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var divParentIdFocus; var divParentIdUnfocus = null; $(document).ready(function() { $("div").focus(function() { //$(this).attr("class", "highlight"); var curDivId = $(this).attr("id"); // This Check needs to be performed when/if div regains focus // from child element. if (divParentIdFocus != curDivId){ divParentIdUnfocus = divParentIdFocus; divParentIdFocus = curDivId; refreshHighlight(); } divParentIdFocus = curDivId; }); $("textarea").focus(function(){ var curDivId = $(this).closest("div").attr("id"); if(divParentIdFocus != curDivId){ divParentIdUnfocus = divParentIdFocus; divParentIdFocus = curDivId; refreshHighlight(); } }); $("#div1").focus(); }); function refreshHighlight() { if(divParentIdUnfocus != null){ $("#" +divParentIdUnfocus).attr("class", "noHighlight"); divParentIdUnfocus = null; } $("#" + divParentIdFocus).attr("class", "highlight"); } </script> <style type="text/css"> .highlight{ background-color:blue; border: 3px solid black; font-weight:bold; color: white; } .noHighlight{ } div, h1,textarea, select { outline: none; } </style> <head> <body> <div id = "div1" tabindex="100"> <h1>Div 1</h1> <br /> <textarea rows="2" cols="25" tabindex="101">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="102">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="103">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="104">~Your Text Here~</textarea> <br /> </div> <div id = "div2" tabindex="200"> <h1>Div 2</h1> <br /> <textarea rows="2" cols="25" tabindex="201">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="202">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="203">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="204">~Your Text Here~</textarea> <br /> </div> <div id = "div3" tabindex="300"> <h1>Div 3</h1> <br /> <textarea rows="2" cols="25" tabindex="301">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="302">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="303">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="304">~Your Text Here~</textarea> <br /> </div> <div id = "div4" tabindex="400"> <h1>Div 4</h1> <br /> <textarea rows="2" cols="25" tabindex="401">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="402">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="403">~Your Text Here~</textarea> <br /> <textarea rows="2" cols="25" tabindex="404">~Your Text Here~</textarea> <br /> </div> </body> </html>
据我所知，你必须使用JavaScript来旅行的dom。
像这样的东西：
$("textarea:focus").parent().attr("border", "thin solid black");
你也需要加载jQuery库。
现在可以通过css方法来实现:focus-within作为范例的:focus-within ： http : //www.scottohara.me/blog/2017/05/14/focus-within.html
/* A normal (though ugly) focus pseudo-class. Any element that can receive focus within the .my-element parent will receive a yellow background. */ .my-element *:focus { background: yellow !important; color: #000; } /* The :focus-within pseudo-class will NOT style the elements within the .my-element selector, like the normal :focus above, but will style the .my-element container when its focusable children receive focus. */ .my-element:focus-within { outline: 3px solid #333; }
<div class="my-element"> <p>A paragraph</p> <p> <a href="http://scottohara.me"> My Website </a> </p> <label for="wut_email"> Your email: </label> <input type="email" id="wut_email" /> </div>
