I am trying to get a focus on a field change the color of a text, but whatever I try: it is not working. Below is the HTML:
.register-section input:focus + .register-section label[for=signup_username] {
color: #ffffff !important;
}
<div class="register-section" id="basic-details-section">
<h4>Account Details</h4>
<label for="signup_username">Username (required)</label>
<input type="text" name="signup_username" id="signup_username" value="" />
</div>
Can anyone tell me what I'm doing wrong?
Thanks in advance!
The + adjacency operator can only be used to select DOM nodes following the initial selector (CSS selectors can only resolve in this direction). As such, because your label is before your input in your html, you cannot select it on the :focus state of the input using CSS.
To fix this, you will need to change your HTML to reverse the order of the elements, and adjust your CSS to change their display order, then select as appropriate:
.register-section label[for=signup_username] {
float: left;
}
.register-section input:focus + label[for=signup_username] {
color: #ffffff !important;
}
<div class="register-section" id="basic-details-section">
<h4>Account Details</h4>
<input type="text" name="signup_username" id="signup_username" value="" />
<label for="signup_username">Username (required)</label>
</div>
An alternative for those who wish to achieve the same result using jQuery, target the focus and blur events of the input field to change the color of the label:
$('#signup_username').on('focus blur', function(e){
var label = $("label[for=signup_username]");
if (e.type == 'focus'){
label.css('color','#FFF');
}
else {
label.css('color','#000');
}
});
See JSFiddle
Related
I have a custom element which I want to have a font color which is the same as the default input placeholder color (which varies by browser/OS).
Is there any css way to set the color to be dynamic according to the current browser's default?
Thanks
You can't directly get the placeholder color, but you can override them:
:root {
--placeholder-color: salmon;
}
*::placeholder {
color: var(--placeholder-color);
}
.test {
color: var(--placeholder-color);
}
<input placeholder="Input something..." value="" />
<div class="test">Placeholder Color</div>
Or you can use the input tag instead, and set the placeholder accordingly.
Then set its all: unset to make it looks like a normal div:
.test {
all: unset;
display: block;
}
<input placeholder="Input something..." value="" />
<input class="test" disabled="disabled" placeholder="Placeholder Color" />
Here is the code:
input[type=text] {display:none}
<input type="text" />
It would hide the whole input element.
Is there a way to keep the input element's out frame UI and just only hide its content without setting its value to "" by js.
Make the color transparent.
.value-hidden { color: transparent }
.value-hidden::selection { color:transparent; }
<input class="value-hidden" value="the hidden message">
This will work if your input value is not excessively long:
.value-hidden { text-indent: -99em; }
<input class="value-hidden" value="the hidden message">
Simply font-size:0 but you need to make sure to apply a width/height to the input.
input[type=text] {
font-size:0;
min-width:200px;
min-height:30px;
}
<input type="text" value="hello world">
I want to change the background color of the label class 'label-status', depending on if the radio button is set to agree or disagree.
<div class="testclass">
<label class="label-status">Status</label>
<label class="radio-inline" style="display:inline-block;"><input type="radio" name="status" disabled="">Agree</label>
<label class="radio-inline" style="display:inline-block;"><input type="radio" name="status" checked="" disabled="">Disagree</label>
</div>
Since it's not my website, but some custom user CSS I want to inject to make it more usable, I cannot make any changes to the actual html.
Thanks for your answers in advance.
You can take advantage of the order property (Flexbox or Grid) together with the for attribute to link the label with the related input element:
.testclass {display: flex} /* displays flex-items (children) inline; can also use the "inline-flex" which only takes the content's width */
.label-status {order: -1} /* puts it back to the desired place (above other siblings); the initial value is set to 0 */
.testclass > input:first-of-type:checked ~ .label-status {background: green}
.testclass > input:last-of-type:checked ~ .label-status {background: red}
<div class="testclass">
<input type="radio" name="status" id="agree">
<label for="agree">Agree</label>
<input type="radio" name="status" id="disagree" checked>
<label for="disagree">Disagree</label>
<label class="label-status">Status</label> <!-- needs to be placed below other siblings in order to take advantage of the "~" selector -->
</div>
Then you can use the general sibling combinator ~ to target the .label-status with e.g. :first-of-type & :last-of-type selectors set on the input elements, of course in conjunction with the :checked pseudo-class selector.
You could use JS, like so:
$(document).ready(function() {
$(".label-status").on("click",function() {
if($(this).find('input[type="radio"]').is(':checked')) {
$('.radio-inline').removeClass('sel_bk_color');
$(this).addClass('sel_bk_color');
}
});
});
Here is an example of this kind of thing in action: https://jsfiddle.net/tr9Lyxz3/1/
By default your inputs are disabled. you have to first remove disable property and then add onclick attributes to run a function which will change background color.
document.getElementsByName('status')[0].removeAttribute("disabled")
document.getElementsByName('status')[1].removeAttribute("disabled")
document.getElementsByClassName('radio-inline')[0].setAttribute("onclick","myFunction()")
document.getElementsByClassName('radio-inline')[1].setAttribute("onclick","myFunction()")
function myFunction(){
if (document.getElementsByName('status')[1].checked) {
document.getElementsByClassName("label-status")[0].classList.remove("myclass2")
document.getElementsByClassName("label-status")[0].classList.add("myclass1");
}
else if (document.getElementsByName('status')[0].checked) {
document.getElementsByClassName("label-status")[0].classList.remove("myclass1")
document.getElementsByClassName("label-status")[0].classList.add("myclass2");
}
}
you have to define your css for myclass1 and myclass2 as per your background color requirement.
this is not possible using pure css as you cant read values dynamically using css. so if you can use js then this will solve your problem without editing html.
Some pure CSS solutions seem to miss the you are not allowed to change the HTML.
Are you allowed to use javascript?
Here is some javascript without JQuery:
var updateLabel = function(e) {
var label = document.getElementsByClassName("label-status")[0];
if (e.target !== e.currentTarget && event.target.type === "radio") {
if(e.target.labels[0].innerText === "Agree") {
label.style.background = "green"
} else {
label.style.background = "red";
}
}
e.stopPropagation();
}
var wrapperElement = document.getElementsByClassName("testclass")[0];
wrapperElement.addEventListener("click", updateLabel, false);
https://codepen.io/anon/pen/MXWJXK
You do have to remove the disabled attribute from your radio buttons. With javascript you can use element.removeAttribute("disabled").
https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
.buttons {
display: flex
align-item: center;
}
.condition {
padding-right: 50px;
}
.status {
order: -1;
padding: 5px;
border: 2px solid #000;
color: #fff;
}
.buttons > input:first-of-type:checked ~ .status {
background: green;
}
.buttons > input:last-of-type:checked ~ .status {
background: red;
}
<div class="buttons">
<input type="radio" name="status" id="agree">
<label for="agree" class="condition">Agree</label>
<input type="radio" name="status" id="disagree" checked>
<label for="disagree" class="condition">Disagree</label>
<label class="status">Status</label>
</div>
I'm trying to make a span background change colors when I focus on an input field. The HTML is as follows:
<div class='parentDiv'>
<span class='spanClass'>Some text</span>
<input class='inputClass' type='text' />
</div>
The closest I could come to something that does this is using the + adjacent sibling selector and doing something like this:
input:focus + span {
background-color: red;
}
But it doesn't quite work because span must come after input. Is there some way for me to make the span background change colors when I focus the input field?
Normally, you would need JS to do that. Here's an example using JS that keeps styling in your CSS:
(function() {
var spanEl = document.querySelector('.parentDiv > .spanClass');
var inputEl = document.querySelector('.parentDiv > .inputClass');
// Add "highlighted" class to "spanClass" element on focus event
inputEl.addEventListener('focus', function() {
spanEl.classList.add('highlighted');
});
// Remove "highlighted" class from "spanClass" element on blur event (un-focus)
inputEl.addEventListener('blur', function() {
spanEl.classList.remove('highlighted');
});
})();
.spanClass.highlighted {
background-color: red;
}
<div class="parentDiv">
<span class="spanClass">Some text</span>
<input class="inputClass" type="text" />
</div>
In your example, though, you could simply float the one element to the left and change the order in the HTML.
.parentDiv { overflow: hidden; }
.spanClass { float: left; }
.inputClass:focus + .spanClass {
background-color: red;
}
<div class="parentDiv">
<input class="inputClass" type="text" />
<span class="spanClass">Some text</span>
</div>
Something to note for the future, though:
The :has() "relational pseudo-class" seems to be in the works for "CSS4". You can also track it here: http://caniuse.com/#feat=css-has
This means that you will (hopefully) be able to do this eventually:
.spanClass:has(+ .inputClass) {
background-color: red;
}
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');
}
});