Develop Reference

Changing label for input with CSS in Angular

I would like to change the css of all labels for all inputs that are disabled. I currently use this in a global scss style sheet:
::ng-deep input:disabled+label {
color: rgb(223, 107, 107) !important;
}
<label for="someLabel">someLabel</label>
<input id="someLabel" disabled>
But the css is not applied to the label.

You can use :has() selector to find previous selector like below:
label:has(+ input:disabled) {
color: rgb(223, 107, 107);
}

The + plus sign is used to select the elements that are placed immediately after the specified element. Therefore your CSS is looking for a label tag after a disabled input tag.
You can achieve more or less the same result like that:
input:disabled + label {
color: rgb(223, 107, 107) !important;
}
.flex {
display: flex;
flex-direction: row-reverse;
float: left;
}
<div class="flex">
<input id="someLabel" disabled />
<label for="someLabel">someLabel</label>
</div>

Getting jQuery to push a value from an 'a' link

Hoping this is fairly simple and I've just overlooked something...
I currently have a page with a bunch of checkbox options. Each checkbox will execute a very simple script adding its value to a string, where it then gets passed over to PHP to do the rest.
The html part for the checkboxes looks like this (repeated for multiple years):
<input type="checkbox" value="2017" class="value_year" onclick="filterdb()" />2017
And the script looks like this:
var year = [];
$('.value_year').each(function(){
if($(this).is(":checked"))
{
year.push($(this).val());
}
});
year = year.toString();
This works perfectly for a checkbox. However, I'm giving the site a makeover now and want to replace checkboxes with regular 'a' links, that I've styled up in CSS to look much prettier when selected/unselected. The problem is I can't figure out how to replicate the behaviour of the script when clicking the link as opposed to checking a checkbox.
The html for the new link looks like this:
<a class='filter value_year' id='filter2017' value='2017' onclick='filterdb()' href='javascript:void(0);'>2017</a>
Is there a simple way to adapt the script to work here?
Many thanks

Don't use an <a>nchor, value isn't supported, it's type of interaction is different than a form control, stick to what you already have. Just hide the checkboxes (they are pain to style) and add a <label> for each checkbox.
In the example below, each <label> is associated to the <input> positioned before it. When a <label> is associated with an <input>, the <label> becomes an extension to the <input> -- clicking the <label> causes the associated <input> to act as it was clicked as well. This association is enabled by assigning the <label> the following:
<label for="ID_of_input_it_is_associated_with"></label>
The JavaScript can stay as it is, in the example, it is modified as an event handler for demo purposes, but there's no harm in using it if it actually serves your purposes.
CSS has details commented in example. Note: hiding checkboxes and a few other rulesets are valid but they are not good for accessibility. Seeing that you're new to this facet, that concern is probably not a factor yet.
let years = [];
$('.year').on('change', function() {
years.length = 0;
$('.year').each(function() {
if ($(this).is(':checked')) {
years.push($(this).val());
}
});
console.log(years.toString());
});
/* ✣ Not good for accessability */
html {
font: 2ch/1.25 Consolas
}
/* Each checkbox is hidden ✣ */
.year {
display: none;
}
label {
display: inline-block;
font: inherit;
margin: 2px;
padding: 2px 4px;
color: navy;
border: 1px groove rgba(129, 129, 129, 0.3);
border-radius: 6px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
/*
These two rules remove the
highlighting for Chrome and
Android ✣
*/
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/*
The "+" means apply styles to <label>
if there is a ".year" that is ":checked"
positioned before it.
Google "adjacent sibling combinator"
*/
.year:checked+label {
color: cyan;
background: #000;
}
.year:checked+label:hover {
color: lightblue;
background: rgba(0,0,0,0.5);
}
label:hover,
label:active {
color: white;
background: rgba(51, 51, 51, 0.4);
}
label:active {
transform: scale(0.90);
transform-origin: center;
transition: all 0.3s ease-out;
}
/* Remove Chrome blue outline ✣ */
:focus {
outline: none !important;
}
/*
Demo purposes only -- styles for console
*/
.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { max-height: 50% !important; max-width: 100%; }
<input id='chx1' class='year' type='checkbox' value='2017'>
<label for='chx1'>2017</label>
<input id='chx2' class='year' type='checkbox' value='2018'>
<label for='chx2'>2018</label>
<input id='chx3' class='year' type='checkbox' value='2019'>
<label for='chx3'>2019</label>
<input id='chx4' class='year' type='checkbox' value='2020'>
<label for='chx4'>2020</label>
<input id='chx5' class='year' type='checkbox' value='2021'>
<label for='chx5'>2021</label>
<input id='chx6' class='year' type='checkbox' value='2022'>
<label for='chx6'>2022</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you insist on using <a> elements as your option switches (see #RobinZigmond and my comments above) then maybe this might be helpful:
var year = [];
document.querySelectorAll("a.value_year").forEach(l=>l.onclick=ev=>{
ev.preventDefault();
l.classList.toggle("checked");
console.log([...document.querySelectorAll("a.value_year.checked")].map(l=>l.getAttribute('href')).join(","));
})
.checked {color:red}
<a class='filter value_year' href='2017'>2017</a>
<a class='filter value_year' href='2018'>2018</a>
<a class='filter value_year' href='2019'>2019</a>
<a class='filter value_year' href='2000'>2020</a>
The click handler for the a.value_year elements does two things:
it sets the checked class for the clicked element
it loops over all a.value_year.checked elements and collects all their .href attribute values into an array.

How do I style an input[range]'s thumb using ONLY javascript?

So I have a range/slider <input type="range">And I got some css to make it look like this:
I would like the thumb to change color as it slides, I got the JS down that I can get the color based on it's value 1-100 but I don't know how to access the range's thumb. Everywhere I look I can access the thumb via CSS but nothing on JS.
My attempts been similar to:
slider.thumb //undefined
slider.shadowRoot //null
slider.style.webkitSliderThumb // undefined
slider.style.thumb // undefined
slider.childNodes // []
slider.children // []

The best way is to use CSS Variables to then pass on the color to the psuedoselector. I have put a very simple example together below:
const input = document.querySelector( 'input' );
input.addEventListener( 'input', event => {
// This assigns the strength of the color to a CSS variable, which will in turn style the slider.
input.style.setProperty( '--color', `rgba(${input.value},0,0,1)`);
})
:root {
--color: rgba(0,0,0,1);
}
input[type=range] {
width: 100%;
height: 1em;
appearance: none;
-webkit-appearance: none;
background: linear-gradient( 90deg, black, red );
}
input[type=range]::-webkit-slider-thumb {
background: var(--color, white);
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 20px;
border: 1px solid white;
}
<input type="range" value="1" min="0" max="255" step="1" />
The elegant bit here is that its nice compatible with all old browsers as well, as you can define the default of white for those people who couldnt be bothered to get modern browsers.
And no, there is no access for pseudo elements in JS as they are... not technically there.

Remove the arrow that appears for input type="time" for HTML5

I am using the default HTML5
sample line of code:
I have used a custom background. I want to remove the black arrow that appears on the right.
The image shows a black arrow that appears. Need it remove it. I tried many css tricks but didn't work.
Sample code

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
or
/* Hide the cancel button */
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Hide the magnifying glass */
::-webkit-search-results-button {
-webkit-appearance: none;
}
/* Remove the rounded corners */
input[type=search] {
-webkit-appearance: none;
}

Arrows
input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Clear (x) button
input[type="time"]::-webkit-clear-button {
-webkit-appearance: none;
}

Just Hide that Arrow
The arrow for <input type="time"> itself — which for example appears on Android — can be removed like this:
input[type="time"] {
-webkit-appearance: none; // Hide the down arrow
}
Take Full Control
But hiding the arrow will still leave you with an issue: the input renders a blank space on the right side of the input field, and it won't react to different settings of text-align. In order to control these, you need to make further adjustments:
input[type="time"] {
-webkit-appearance: none; // Hide the down arrow
}
// Android renders the time input as a flex box
// with a left-aligned flex element "webkit-date-and-time-value" for the value.
// It also leaves a blank space of 24px for the down arrow.
input[type="time"]::-webkit-date-and-time-value {
margin: 0; // By default Android renders this as 1px 24px 1px 1px
width: 100%; // Let the flex element take the full width of the input
text-align: center; // Control your text alignment here
}

Radio button background color with Chrome and WebGL <canvas>

When using the WebGL renderer from Three.js, radio buttons gain white backgrounds. It appears to only occur in Chrome.
Here's a fiddle showing the problem: http://jsfiddle.net/5pL8v/328/
Is there any, and if so preferably CSS, fix to this?
Example code:
<style>
body {
background: black;
}
</style>
<script>
renderer = new THREE.WebGLRenderer();
$(document).ready(function() {
$("body").append(renderer.domElement);
});
</script>
<input type="radio">

I was not able to see the problem OSX / Chrome beta. However, it is probably related to the rendering of widgets in native style by default and your operating system version. You can disable this in WebKit browsers using -webkit-appearance: none.
Example how to replace radio button with a green square:
body {
background: black;
color: white;
}
input[type=radio] {
background: green;
color: yellow;
-webkit-appearance: none;
width: 10px;
height: 10px;
}
input[type=radio]:checked {
background: red;
}
I suggest you style radio buttons in platform-neutral way if they break on you. Here is one tutorial: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/