I'm having an issue trying to apply styling to a sibling element.
.ac_numeric input[type=text][disabled] {
cursor: not-allowed;
}
<div class="ac_numeric">
<input type="text" />
<div class="numericbuttonswrapper">
<div class="numericupbutton"></div>
<div class="numericdownbutton"></div>
</div>
</div>
This all works fine, applying the "not-allowed" cursor to my input when it's disabled but I also need to add the cursor to my div with class="numericbuttonswrapper" when the input is disabled.
I can't find the answer when going through the available css selectors, is this possible?
Use the adjacent sibling selector (+)
.ac_numeric input[type=text][disabled],
.ac_numeric input[type=text][disabled] + .numericbuttonswrapper {
cursor: not-allowed;
}
.ac_numeric input[type=text][disabled],
.ac_numeric input[type=text][disabled] + .numericbuttonswrapper {
cursor: not-allowed;
}
<div class="ac_numeric">
<input disabled type="text" />
<div class="numericbuttonswrapper">
<div class="numericupbutton">test</div>
<div class="numericdownbutton">testing2</div>
</div>
</div>
Related
I have been trying a couple of methods here to make my font-awesome icon colored white as I focus on my input... but nothing seems to work.
My code looks like this:
HTML
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
I've tried doing:
input:focus + .fas-fa-user-secret {
color: #fff;
}
input:focus + .fas {
color: #fff;
}
input:focus + .i {
color: #fff;
}
But none of the above CSS code works. Not even the text in the input is white, but whenever I remove the + and the rest it does work for input.
Any help on this is appreciated, looked at every thread about making icons a different color when focusing on input.
Thanks.
You need to use input:focus+.icon since you have your icon inside the .icon div.
input:focus+.icon {
color: #ff0000;
}
input:focus {
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
The problem is that you are using general sibling combinator, which select its siblings right after it, which is a <div>, not the icon.
input:focus + .fas-fa-user-secret {
color: #fff;
}
What you may want to do is set color: inherit to the icon, and then set desiring color for the div via this CSS selector and it will be fine
input:focus + div {
//your style
}
For instance in the code
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
</div>
The elements I would want to select are marked selected, and the elements I do not want selected are marked unselected.
<div class="ofChildClass" unselected>
<div class="other1" selected>
<div class="other2" selected>
<div class="ofStopClass" unselected>
<div class="other3" unselected>
<div class="other4" unselected>Text</div>
</div>
</div>
</div>
<div class="other5" selected></div>
<div class="ofStopClass" unselected></div>
</div>
</div>
</div>
Is it possible to make a selector, or multiple selectors that would select these elements without bruteforce.
To put the question into code is it possible to do this
.ofChildClass > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass)
...
without needing to repeat.
Not sure what kind of CSS you want to apply but this behavior can be defined using CSS variables like below:
:root {
--c:initial; /* we start by initial (nothing defined, default value)*/
}
div {
outline:4px solid;
outline-color:var(--c);
padding:10px;
margin:5px;
}
div::before {
content:attr(class);
}
/* we define the color here */
.ofChildClass > * {
--c:red;
}
/* we reset the coloration again here*/
.ofStopClass {
--c:initial;
}
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
What I understood from your question is that you need to target divs that are marked selected only. You can do this by a code like this:
div[selected]{
color: blue;
}
div{
color: initial;
}
This code target all the divs that have a selected attribute given to them. As the color property is 'inherited', I had to revert color of all the divs to initial. This is just an example, otherwise div[selected] will select all the marked divs.
I have a hamburger menu with no javascript (I can't use it, that's the assignment) using a label icon from FontAwesome and I want the icon to change to another one when the checkbox is checked, I just have no idea how to do that. I've checked online and apparently it's not possible without JS but I rather ask just in case.
The icon is directly inside the label using class and I know i can add as many labels as I want and they're just gonna stack up, but I don't know how to hide/show one of them depending on the status of the checkbox or if there's another way:
<div id="hamburger">
<img src="thelogo.png" alt="logo">
<input type="checkbox" id="button">
<label for="button" class="fas fa-bars"></label>
<ul class="items">
<li>EPISODES</li>
<li>INTERVIEWS</li>
<li>ABOUT US</li>
</ul>
</div>
You could use multiple icons and show/hide whichever you want.
<input type="checkbox" id="button">
<label for="button" class="fas fa-bars"></label>
<label for="button" class="fas arrow-circle-up"></label>
#button:checked ~ .fa-bars {
display: none;
}
#button:checked ~ .arrow-circle-up {
display: inline-block;
}
Or a more elegant way would be to update the content of the icon code.
#button ~ label::before {
content: '\f0c9'; // bars code
}
#button:checked ~ label::before {
content: '\f0aa'; // arrow up code
}
Heres a cheatsheet of all the icon codes
To change the label icon when the checkbox is checked, use :before pseudo element.
Example
JsFiddle
html
<input type="checkbox" id="button">
<label for="button" class="fas"></label>
css
#button {
display: none;
}
#button + label:before {
content: "\f0c9";
}
#button:checked + label:before {
content: "\f0aa";
}
Use the pseudo class :checked : https://css-tricks.com/almanac/selectors/c/checked/
Example :
#button:checked + label {
background : red;
}
#button:checked + label {
background : blue;
}
That will change the background of your label when the checkbox is checked or not
If you are using React you can simply do this:
<span>
<Input type="checkbox" id="button" checked={isChecked} onChange={handleChange}/>
{isChecked ? <FontAwesomeIcon icon={faCheckSquare} /> : <FontAwesomeIcon icon={faSquare} /> }
{value}
</span>
I have to style an input control based on the select box's class. If select box has a class "error", then I need a red border on the input control. How can I do that with SASS ? There is no common wrap, only one thing is that the wrap of the input control (.select-input-wrap) is adjecent to select box. Here is the DOM structure.
<select class="form-select error"></select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
You need to style a sibling element, try the below code in your SASS file.
$red: #f00;
.error {
&.form-select {
+ .select-input-wrap {
> .select-input {
border: 1px solid $red;
}
}
}
}
In pure CSS (and so in SASS), you can target sibling elements using the + operator. For instance:
.form-select.error + .select-input-wrap input {
border: 3px solid red;
}
Related sandbox: http://www.cssdesk.com/r8Dh8
If your select and div elements share a parent, you can style based on that:
.parent .error + .select-input-wrap input {
border: 1px solid red;
}
<div class="parent">
<select id="some-sel" class="form-select error"> </select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
<select id="another-sel" class="form-select"> </select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
</div>
For the SASS version, just take out the extra punctuation!
This is a css solution. Hope you can convert to sass structure.
.error~.select-input-wrap input{
border: solid 1px red;
}
<select class="form-select error"></select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
I´ve got a problem with my Web-Design: I want content box to open when a specific radio button is activated with
input#topic1:checked ~ #content1{
color:yellow;
}
but nothing happens. Rest of code is in this jsfiddle. I bet the answer is really easy but I tried a lot and didn´t found any question which answeres this.
Thanks for any effords
Tim
The problem is that the ~ selector works with siblings that share the same parent, in your case the parent is body but the content divs are inside label, so you should target it like this:
input#topic1:checked ~ label #content1 {
color: yellow;
}
input#topic2:checked ~ label #content2 {
color: yellow;
}
input#topic3:checked ~ label #content3 {
color: yellow;
}
See jsFiddle fork: https://jsfiddle.net/azizn/k8gxzq56/
First you don't have to close input tags as sais #Aziz
Then, I use javascript to do this.
See this fiddle
$(function(){
$("input[type=radio]").on('click', function(){
$('.contentbox').removeClass('yellow');
// get the target link
target = $(this).data('href');
$("#"+target).addClass('yellow');
});
});
Rearranged your code to make it work with CSS only.
.contentbox{
width:100vw;
height:10vw;
}
#content1{
background:#0000FF;
}
#content2{
background:#FF0000;
}
#content3{
background:#00FF00;
}
input#topic1:checked + .content1{
color:yellow;
}
input#topic2:checked + .content2{
color:yellow;
}
input#topic3:checked + .content3{
color:yellow;
}
<input type="radio" name="topic" class="topic_selection, topic1" id="topic1">
<label for="topic1" class="content1">
<div class="contentbox" id="content1">
<h1>Text 1</h1>
</div>
</label>
<input type="radio" name="topic" class="topic_selection" id="topic2">
<label for="topic2" class="content2">
<div class="contentbox" id="content2">
<h1>Text2</h1>
</div>
</label>
<input type="radio" name="topic" class="topic_selection" id="topic3">
<label for="topic3" class="content3">
<div class="contentbox" id="content3">
<h1>Text3</h1>
</div>
</label>