Using :focus to style outer div?
While this can't be achieved with CSS/HTML alone, it can be achieved with JavaScript (without need of a library):
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.
Incidentally, with a library, such as jQuery, the above could be condensed down to:
$('textarea').focus(
function(){
$(this).parent('div').css('border-style','solid');
}).blur(
function(){
$(this).parent('div').css('border-style','dashed');
});
JS Fiddle demo.
References:
getElementsByTagName()
.onfocus
.onblur
.parentNode
.tagName
.toString()
.toLowerCase()
.style
.focus()
.blur()
.parent()
.css()
.
How to add outer colour around this div when it has focus?
As Paulie_D advised, outline property is what you're looking for when the element is focused. If you need to know what options are available for the outline
property, W3 Schools has great visuals that you can review
Make :focus change css of another class
Using pseudo-classes (such as :hover
or :focus
) to modify other elements can only be done if the other elements are siblings or children of the element which has the pseudo-class. That's because CSS child/sibling selectors are fairly restrictive.
You can use the >
selector to select a direct child, and the +
selector to select a direct sibling. For example, if you have the following HTML:
<form>
<input type="text" />
<input type="submit" />
</form>
<p class="arbitrary">
This is an arbitrary element. It is neither a child nor sibling of
the text field. It cannot be selected as a result of a pseudo-class
action on the textfield using CSS, but can be selected using
client-side scripting such as JavaScript.
</p>
You could style the button when the text field has focus (because it is a direct sibling of the text field), but there is no possible way to style the arbitrary paragraph as a result of the text field receiving focus (because it is neither a child nor sibling, it is the sibling of a parent) without using client-side scripting (JavaScript, jQuery, etc.).
This CSS would style the submit button, and can be altered to select any direct or indirect child or sibling:
input[type="text"]:focus + input[type="submit"] {
/* some sweet CSS */
background-color:green;
}
Using Javascript, of course, you have much greater flexibility. The focusin
and focusout
events can be used to toggle CSS classes. Here's an example that demonstrates both the CSS and JavaScript techniques of achieving this.
function setFocused() {
document.querySelectorAll('.arbitrary').forEach((result) => {
result.classList.add('focused');
});
}
function unsetFocused() {
document.querySelectorAll('.arbitrary').forEach((result) => {
result.classList.remove('focused');
});
}
document.querySelectorAll('input[type="text"]').forEach((result) => {
result.addEventListener("focusin", setFocused);
result.addEventListener("focusout", unsetFocused);
});
input[type="text"]:focus + input[type="submit"] {
/* some sweet CSS */
background-color: green;
}
.arbitrary.focused {
/* even more sweet CSS */
color: red;
}
<form>
<input type="text" />
<input type="submit" />
</form>
<p class="arbitrary">
This is an arbitrary element. It is neither a child nor sibling of
the text field. It cannot be selected as a result of a pseudo-class
action on the textfield using CSS, but can be selected using
client-side scripting such as JavaScript.
</p>
Why is this div not appearing when another div is focused?
.explore-card-hidden-info
is not a descendant of .explore-card-light
, it's an adjacent element. Use +
to represent that in CSS.
To make a DIV focusable from the mouse, you need to give it a tabindex
.
.explore-card-hidden-info {
display: none;
}
.explore-card-light:focus + .explore-card-hidden-info {
display: block;
}
<div>
<div class="explore-card-light web-box-hor" style={props.style} tabindex="1">
<div>
<img src={props.src} alt="imgex" style={{width: "100%", margin: 'auto', height: 'auto'}}></img>
</div>
<div style={{marginLeft: '20px'}}>
<p class="card-title" style={{textAlign: 'left'}}>{props.title}</p>
<p class="card-main-text">{props.main}</p>
<p class="card-footer-text">{props.ex}</p>
</div>
<div style={{marginLeft: '20px'}}>
<p class="explore-card-footer-text" style={{margin: 'none'}}>rates: {props.rate}</p>
<p class="explore-card-footer-text" style={{margin: 'none'}}>views: {props.views}</p>
<p class="explore-card-footer-text" style={{margin: 'none'}}>purchases: {props.buys}</p>
</div>
<div style={{ padding: '30px 150px' }}>
<p class="card-title">{props.money}</p>
<OpBtnOutlineRound text="Buy"></OpBtnOutlineRound>
</div>
</div>
<div class="explore-card-hidden-info">
<h2>
I adm hidden!
</h2>
</div>
</div>
How to show div on input focus in css?
When you use input:focus .bar
selector, the browser searches for .bar
under the descendents of input
. Whereas, .bar
is a sibling of the input
.
You could use one of the sibling selectors here. Like: input:focus + .bar
or input:focus ~ .bar
.cool { font-size: 30px; margin: auto; outline: none; padding-bottom: 0.2em; border-width: 0px 0px 2px 0px; border-bottom-color: black;}
div.bar { width: 365.3px; height: 2px; background-color: #42c0fb; position: relative; top: -2px; display: none;}
input:focus + .bar { display: block}
<div style="margin: auto;"> <input class="cool" type="text" /> <div class="bar"> Hello</div></div>
Related Topics
How to Center Multiple Inline-Block Elements with CSS
How to Inspect and Tweak :Before and :After Pseudo-Elements In-Browser
How to Keep CSS Floats in One Line
How to Remove Space (Margin) Above HTML Header
How to Add a Margin to a Table Row <Tr>
How to Ensure That Text Is Inside Rounded Div
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
Two Divs, One Fixed Width, the Other, the Rest
CSS Flexbox: Difference Between Align-Items and Align-Content
Less and Bootstrap: How to Use a Span3 (Or Spanx [Any Number]) Class as a Mixin
Perspective and Translatez Moves Diagonally
How to Target Microsoft Edge with CSS
CSS Specificity or Inheritance
Differencebetween the Hidden Attribute (Html5) and the Display:None Rule (Css)
How to Efficiently Load Google Fonts in Nuxt
Are "Top" and "To Top" the Same Direction for Linear Gradients