使用:重点风格的外部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-within CSS伪类内匹配: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>