I'm trying to hide parents pseudo element ::before hide on input focus and it shouldn't work on button focus. Currently it looks like this
.parent::before{
content: 'default';
}
.parent:focus-within::before{
display: none;
}
<div class="parent">
<input type="text">
<button>awd</button>
</div>
and it doesn't seem to work. I don't want to involve any js/jquery. Would be great if there any vanila css or atleast scss solution.
Thanks in advance!
You can't do that with parent focus to control pseudo element, cause button and input both trigger focus on parent, you can't approve one and disapprove another. Instead, you can wrap input to do that.
label::before{
content: 'default';
}
label:focus-within::before{
display: none;
}
<div class="parent">
<label>
<input type="text">
</label>
<button>awd</button>
</div>
Related
I am having trouble styling my bootstrap toggle button. I can't seem to make any styling work.
I only really need to increase the width of it but even that does not work. Here's a link to the jsfiddle. I want the toggle switch to just get a bit bigger. any help welcome!
<div class="col-sm-1 col-lg-3">
<label>Show available teams only</label>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-control" id="checkboxx">
<label class="custom-control-label" for="checkboxx"></label>
</div>
</div>
once again, if anyone could point me to how to style a bootstrap toggle button it'd be much appreciated!
Change the width of label::before to increase the width
.custom-switch .custom-control-label::before {
width:50px !important;
}
To make the checked label:after according to label:before change the size of transform as mentioned below
.custom-switch .custom-control-input:checked~.custom-control-label::after {
background-color: #fff;
transform: translateX(1.75rem)!important;
}
!important - is to change the predefined bootstrap css with our css
Before change in your file try in inspect element it will clear your doubt
I was trying to use
.myDivName button:nth-child(2) {
background-color: red;
}
to select my second button in <div class="myDivName"> but it doesn't work. The code I have is -
<div class="myDivName">
<button>
1
</button>
<input type="text">
<button>
2
</button>
</div>
but I found that if I deleted the <input> in between, then nth-child would work.
How can I properly select this button using nth-child(2)? If nth-child cannot be used, what's the best way?
Thanks!
fiddle - https://jsfiddle.net/e6au4hot/9/
Use nth-of-type instead:
.hi > button:nth-of-type(2) {
background-color: red;
}
jsFiddle example
You're concerned with the type of element, not the position in the hierarchy
Ciao, I have this element here:
<div class="uk-form-row">
<div class="md-input-wrapper md-input-filled md-input-focus">
<label>Label</label>
<input type="text" class="md-input">
<span class="md-input-bar"></span>
</div>
</div>
This is from a material design theme (Altair Admin v2) so the element once the page is loaded does this:
As you can see the label is moving around (but maybe is not a big deal).
With other elements, if they are empty (invalid) I can underline them or change their color using css:
input:invalid::-webkit-input-placeholder{
color: #e53935 !important;
}
But being this a label BEFORE the input I don't know how I can select it with CSS. How do I turn the LABEL into a different color if the input is invalid?
There is a simpler way to get this done. The :valid and :invalid pseudo-classes will automatically bubble up to a parent <fieldset>. Here is the reference.
You can take advantage of this fact to style your label like so:
<fieldset>
<label>Label</label>
<input type="text" />
</fieldset>
Then in your CSS
fieldset:invalid > label:first-of-type {
color: #e53935 !important;
}
So if your input is :invalid it will invalidate your fieldset, which you can then reference to style your label.
Look at CSS code (simplified to illustrate my point):
.md-input-wrapper {
position: relative;
}
.md-input-wrapper > label {
position: absolute;
top: 16px;
left: 4px;
right: 0;
}
Label is positioned absolutely relative to wrapper, so you can put label element after input element in HTML:
<div class="md-input-wrapper">
<input type="text" class="md-input">
<span class="md-input-bar"></span>
<label>Label</label>
</div>
After that, you can use General sibling combinator to select label of invalid input:
input:invalid ~ label {
color: red;
}
I have a form where if someone checks a specific input, I want it to show a div. The problem is that the input does not share the same parent as the subsequent div (and can't, for framework reasons). So for example:
<div>
<input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
<!--content to show if test input is checked-->
</div>
This CSS almost works, but is broken by the fact that the div I want to show is not inside the parent of the input:
#test ~ #ShowIfTestIsChecked{
display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
display:block;
}
Is there some other CSS trick I can use here to make this work? This is easy to do with javascript, but I'd like a CSS only way to do it.
Doing this in css would require being able to select the parents div and then the next div which isn't possible in css, You can only select the next or children elements in a css selector.
Why do you want to wrap the input in a div in the first place?
Gimme a sec I'll post an update with css trick that works they way you want but requires changing the first div element into a form element.
So you have to chance the html or us js.
For html you've got 2 options , put the content of each div together or use a form element:
<form>
<input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
Hello world
</div>
#ShowIfTestIsChecked {
display: none;
}
form:valid ~ #ShowIfTestIsChecked {
display: block;
}
Just put your checkbox and div together:
<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>
#test:checked ~ #ShowIfTestIsChecked {
display: block;
}
There's no other CSS-way.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.