Wenn ich anfange, Text in den Textbereich zu schreiben, möchte ich, dass der äußere Teil mit einem Klassenfeld den Rand fest anstatt gestrichelt dreht, aber irgendwie gilt der: Fokus in diesem Fall nicht. Wenn es funktioniert mit: active, warum funktioniert es nicht mit: focus?
Irgendwelche Ideen warum?
(Hinweis. Ich möchte, dass der Rand des DIV fest wird, NICHT die Textbereiche.)
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
focus
stylesheet
Weblurk
quelle
quelle
textarea
werden die Ränder von geändertdiv
, aber wenn Sie dietextarea
Steals aktivieren, konzentrieren Sie sich wieder.Antworten:
Dies kann zwar nicht allein mit CSS / HTML erreicht werden, aber mit JavaScript (ohne Bibliothek):
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 Fiddle Demo .
Im Übrigen könnte mit einer Bibliothek wie jQuery das Folgende auf Folgendes reduziert werden:
$('textarea').focus( function(){ $(this).parent('div').css('border-style','solid'); }).blur( function(){ $(this).parent('div').css('border-style','dashed'); });
JS Fiddle Demo .
Verweise:
getElementsByTagName()
.onfocus
.onblur
.parentNode
.tagName
.toString()
.toLowerCase()
.style
.focus()
.blur()
.parent()
.css()
.quelle
Andere Poster haben bereits erklärt, warum die
:focus
Pseudoklasse nicht ausreicht, aber schließlich gibt es eine CSS-basierte Standardlösung.CSS Selectors Level 4 definiert eine neue Pseudoklasse:
: Fokus innerhalb
Von MDN :
Also jetzt mit der
:focus-within
Pseudo-Klasse - das Styling des äußeren Divs, wenn dastextarea
angeklickt wird, wird trivial..box:focus-within { border: thin solid black; }
Code-Snippet anzeigen
.box { width: 300px; height: 300px; border: 5px dashed red; } .box:focus-within { border: 5px solid green; }
<p>The outer box border changes when the textarea gets focus.</p> <div class="box"> <textarea rows="10" cols="25"></textarea> </div>
Codepen-Demo
NB: Browserunterstützung : Chrome (60+), Firefox und Safari
quelle
DIV
Elemente können fokussiert werden, wenn dastabindex
Attribut festgelegt wird. Hier ist das Arbeitsbeispiel.#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>
Weitere Informationen zu
focus
undblur
finden Sie in diesem Artikel .Update: Und hier ist ein weiteres Beispiel
focus
zum Erstellen einesmenu
.#toggleMenu:focus { outline: none; } button:focus + .menu { display: block; } .menu { display: none; } .menu:focus { display: none; }
<div id="toggleMenu" tabindex="0"> <button type="button">Menu</button> <ul class="menu" tabindex="1"> <li>Home</li> <li>About Me</li> <li>Contacts</li> </ul> </div>
quelle
Dies kann jetzt durch die CSS-Methode
:focus-within
erreicht werden, die in diesem Beitrag erläutert wird: 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>
quelle
Einfache Verwendung von 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>
quelle
Sie können zwischen div-Tags wechseln. Fügen Sie dem div einfach einen Registerkartenindex hinzu. Verwenden Sie am besten jQuery- und CSS-Klassen, um dieses Problem zu lösen. Hier ist ein Arbeitsbeispiel, das in IE, Firefox und Chrome getestet wurde (Neueste Versionen ... wurden nicht älter getestet).
<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>
quelle
Gemäß Spezifikation :
Das
<div>
akzeptiert keine Eingaben, kann es also nicht haben:focus
. Darüber hinaus können Sie mit CSS keine Stile für ein Element festlegen, die auf der Ausrichtung auf seine Nachkommen basieren. Sie können dies also nur dann wirklich tun, wenn Sie bereit sind, JavaScript zu verwenden.quelle
<div>
den Fokus erhalten kann, wenn Sie dascontenteditable="true"
Attribut festlegen . Aber in diesem Fall ist das wahrscheinlich nicht die Antwort.Soweit mir bekannt ist, müssen Sie Javascript verwenden, um den Dom zu bereisen.
Etwas wie das:
$("textarea:focus").parent().attr("border", "thin solid black");
Sie müssen auch die jQuery-Bibliotheken laden.
quelle
Einige Leute, wie ich, werden von der Verwendung der
:focus-within
Pseudoklasse profitieren .Wenn Sie es verwenden, wird das gewünschte CSS beispielsweise auf ein Div angewendet.
Weitere Informationen finden Sie hier https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
quelle
Fokus innerhalb
.box:focus-within { background: cyan; }
Lesen Sie hier mehr
quelle