I'm trying to style the below type of styles in a React.js but I have no idea to change color according to react variable. The code is as follows:
CSS:
.toggle input:checked + .slider {
background-color: ${color};
}
React:
const { color } = userDoc.data()
return(
<div className="toggle">
<label className="switch">
<input type="checkbox" onChange={onChangeIsLve} checked={isActive}/>
<span className="slider round"></span>
</label>
</div>
)
You could add an inline style if you want to style the span element.
const { color } = userDoc.data()
// create a custom style
const customStyle = { backgroundColor: color }
return(
<div className="toggle">
<label className="switch">
<input type="checkbox" onChange={onChangeIsLve} checked={isActive}/>
<!-- add it here -->
<span className="slider round" style={style}></span>
</label>
</div>
)
Related
I want to remove text off the screen when a checkbox is selected using CSS. I want to know if there's a way of doing this through CSS. Here's some code
<form>
<input id="check" type="checkbox">
</form>
<p> sample text </p>
How do I remove the sample text when the checkbox is selected. I want to achieve this by using CSS.
UPDATE
It's not possible to do it through CSS, so can you tell me if there's a way to do this through JS.
If you can change the HTML to
<form>
<input id="check" type="checkbox">
<p>sample text</p>
</form>
You could use adjacent sibling selector and the checked pseudo class.
/* Remove entire p */
input:checked + p { display:none; }
/* Resize the font to zero */
input:checked + p { font-size: 0; }
/* Indent the text so it is offscreen */
input:checked + p { text-indent: -9999px; }
You can actually achieve this result if you are able to change your structure a bit. You will need to put input and p tag together in the same div so we can target them with CSS.
html:
<form>
<input id="check" type="checkbox">
<p class="hello"> sample text </p>
</form>
css:
input[type="checkbox"]:checked + p {
display:none
}
Here's a solution with JavaScript:
func = () => {
if(document.querySelector("input").checked) {
document.querySelector("p").style.display = "none";
} else {
document.querySelector("p").style.display = "block";
}
}
<form>
<input id="check" type="checkbox" onchange="func()">
</form>
<p>Some Text</p>
Make a little change in your HTML:
<form>
<input id="check" type="checkbox">
<p id="home"> sample text </p> <!-- added an id to the p tag -->
</form>
Create a JavaScript file, lets say 'main.js', inside write the code:
function change() {
var decider = document.getElementById('check');
if(decider.checked){
document.getElementById('home').innerHTML = "";
}
}
Add a script tag to link your JS file to the HTML:
<script type="text/javascript" src="main.js"></script>
React (HTML)
<div className={"OK"}>OK</div>
<input type="checkbox" id={"MainPage-checkbox-menu"} />
<label htmlFor={"MainPage-checkbox-menu"}></label>
CSS
#MainPage-checkbox-menu:checked ~ .OK {
color: #8ef6ad;
}
codesandbox.io
I seem to be doing everything right but the checkbox does not change the color style of the div element. How to make the checkbox change the color of the div element ?
According to your CSS selectors, you need the element with the class OK to be placed below the :checked element. So your markup should look like this:
export default function App() {
return (
<div className="App">
<input type="checkbox" id={"MainPage-checkbox-menu"} />
<div className={"OK"}>OK</div>
<label htmlFor={"MainPage-checkbox-menu"}></label>
</div>
);
}
I have below code
<span className="item-toggle" onClick={toggleChecked}>
<Checkbox toggle checked={checked} data-togglecolor={toggleColor}/>
</span>
That renders to
<span class="item-toggle">
<div class="ui checked fitted toggle checkbox" data-togglecolor="#9cd3dd">
<input class="hidden" readonly="" tabindex="0" type="checkbox" value="" checked="">
<label></label>
</div>
</span>
The Checkbox component is part of the Semantic UI React. I would like to use the value of the data-togglecolor to style my input :
.ui.toggle.checkbox input:checked ~ label:before {
background-color: XXX;
}
I could ofcourse hardcode it like below in my CSS
.ui.toggle.checkbox[data-togglecolor="#9cd3dd"] input:checked ~ label:before {
background-color: #9cd3dd;
}
But I was wondering how I could achieve this dynamically.
Thanks !
Do you use styled-components ?
If so, you could override the Checkbox component to pass the background-colour to its child, just like this :
const Checkbox = styled(ImportedCheckbox)`
input {
background-color: ${p => p['data-togglecolor']};
}
`
You can't access props in your CSS files unless you used something like styled-components or something related, what you can do is add a style attribute to your checkbox
<div class="ui checked fitted toggle checkbox" style={{backgroundColor: this.props.yourcolorprophere}}></div>
I am trying to apply certain styles to all items in list besides the first child. I think I set up the sass correctly, however the style is not being applied currently.
html
<div class="list">
<div *ngFor="let item of data; index as i; first as isFirst; last as isLast"class="list-item">
<input class="radio" name="radio" type="radio" />
<label for="radio1">Buttom</label>
</div>
</div>
sass
.list label:not(:nth-of-type(1))::before{
background-color:blue;
}
You can achieve this doing by all the items bg blue and the first one's bg to white or whatever your background is.
<div class="list">
<div *ngFor="let item of data; let i=index" [class.first]="i === 0">
<input class="radio" name="radio" type="radio" />
<label for="radio1" class="lbl">{{item.name}}</label>
and your css should be like this:
label {
background-color:blue;
}
.first label {
background-color: #fff;
}
I assume your data is like that:
data = [
{name: "car"},
{name: "truck"},
{name: "bike"}
]
This is working example
If you mean selecting all .list-item except the first one, the CSS will be like:
.list-item:not(:nth-of-type(1))::before {
content: '';
background-color:blue;
}
Since you are using pseudo element ::before, you may want to use content: '' to specify some content, otherwise background-color will has no effect.
I have a radio button and I need to add a style to its parent div when the radio button is checked. This I need to do only with css. In the below html, if the radio is checked, i need to apply a color to the div "options"
HTML
<div class="options">
<span class="option_radio">
<input type="radio" name="payMethod" id="payMethod1" value="aaa" >
</span>
<span class="option_image">
<label for="payMethod1">
<img src="abc.png" >
</label>
</span>
</div>
I tried the below approaches but its not coming correctly
.options input[type="radio"]:checked span{
background-color:black;
}
.options input[type="radio"]:checked div.options{
background-color:black;
}
could somebody please help me on this
Sorry, can't do that yet. You can only go down the tree, not up it. You will either need to make the elements you want to style siblings or descendents of the radio button. Ancestor selectors do not yet exist:
http://css-tricks.com/parent-selectors-in-css/
<input type="radio" name="payMethod" id="payMethod1" value="aaa" />
<div class="options">
<span class="option_radio">
</span>
<span class="option_image">
<label for="payMethod1">
<img src="abc.png" />
</label>
</span>
</div>
css
input[type='radio']:checked + div.options {
background-color:green;
}
input[type='radio']:checked + div.options span {
background-color:red;
}
That would require using parent selectors from CSS4 http://www.w3.org/TR/selectors4/ Unfortunately CSS4 is not yet available. So for today it is not possible to do that using pure css.
Javascript is your answer. Provided Vanilla and jQuery examples.
var payMethod = document.querySelector('#payMethod1');
payMethod.onchange = function() {
alert('clicked')
// Get span and div
if(this.checked) {
var elements = document.querySelectorAll('.option_radio, .options');
// Loop elements & add class
for(var i = 0; i < elements.length; i++) {
if (elements[i].classList)
elements[i].classList.add("checked");
else
elements[i].className += ' checked';
}
}
};
//jQuery implementation
$('#payMethod1').change(function() {
if($(this).is(':checked')) {
$('.option_radio, .options').addClass('checked');
}
});