Is there a way to select the webkit-datetime-edit-year-field of Google Chrome in a disabled input using CSS?

I have a CSS class defined in my module.css file that alters the color of yyyy when an input is in range:

.field input[type='date']:in-range::-webkit-datetime-edit-year-field {
  color: transparent;
}

This styling works as expected when the input is enabled. However, when the input is disabled, the default color set by Google Chrome for that field is displayed.

I have attempted several variations to target the datetime-edit-year-field when the input is disabled, but none have been successful:

.field input:disabled[type='date']:in-range::-webkit-datetime-edit-year-field {
  color: transparent;
}

.field input[type='date']:disabled:in-range::-webkit-datetime-edit-year-field {
  color: transparent;
}

.field input[type='date']:in-range::-webkit-datetime-edit-year-field:disabled {
  color: transparent;
}

How can I effectively style the datetime-edit-year-field when the input is disabled?

htmlcssgoogle-chrome

Answer №1

Give this a shot. Whether the field is disabled or not, try the following code snippet.

input[type='date']:disabled::-webkit-datetime-edit-year-field {
  color: transparent;
}

Answer №2

Through some experimentation and persistence, I was able to discover the solution to my query. Initially elusive, the answer revealed itself when I strategically placed the :disabled selector in various locations until functionality was achieved.

.field
  input[type='date']:disabled::-webkit-datetime-edit-year-field {
  color: transparent;
}
.field
  input[type='date']:disabled::-webkit-datetime-edit-month-field {
  color: transparent;
}
.field
  input[type='date']:disabled::-webkit-datetime-edit-day-field {
  color: transparent;
}
.field
  input[type='date']:disabled::-webkit-datetime-edit-text {
  color: transparent;
}

These classes, in sequence, alter the color to transparent for the following elements:

  1. Year - YYYY
  2. Month - MM
  3. Day - DD
  4. Separator text - /

Edit: Following advice from @Azu, I have removed the redundant :disabled selector.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to access jQuery pages from a user script?

I am interested in creating a brief userscript for a webpage that already has jQuery. I have no trouble accessing the $ object from the Chrome developer console, but when trying to access it from the user script, I receive an error message stating that jQu ...

javascriptjquerygoogle-chromeuserscripts

Alignment problem in CSS, identical code on two separate servers

After transitioning from the design phase to development, I encountered a strange CSS issue on one small section of my client's website. Specifically, in the "Official NGK Canada Part Finder" section, the text is breaking onto new lines unexpectedly. ...

htmlcssalignment

How to Send Javascript DOM Value to Inner HTML

I am trying to extract a value from a hidden element ID and set it as the inner HTML for another element ID. Below is my code: <script> function replaceText(){ var x=document.getElementById("mainTitle1").textContent; document.getElementById("mainTi ...

javascripthtmldom

PHP fails to substitute the variable with its updated value, despite the fact that the value has been changed in the code

I've been working on a PHP script to manage form validation for a submission system, but I'm encountering a persistent error that's puzzling me. Here's what's happening: There's a variable named $resourceContent which gets upd ...

phphtml

Obtain the URL of the chosen file from the input file in an HTML/AngularJS framework

Currently, I am developing a web app in MVC-5 using AngularJS. Below is the structure of the div that I am working on: <div class="row form-clearify" style="margin-top:3px;"> <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:w ...

jqueryhtmlangularjsfile

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the atta ...

javascriptjquerycssangularapexcharts

How to Change Text When Accordion is Expanded or Collapsed using Javascript

Help needed with JavaScript accordion menu for displaying indicators in front of section headers. The goal is to show a (+) when collapsed and (-) when expanded. The current code only changes on click, not based on the section's state. Looking for fre ...

javascriptcssaccordion

Setting an image or color at specific map coordinates in HTML - a step-by-step guide!

Is it possible to implement colors within the coordinates of a map instead of using transparent clickable spaces? Specifically, when clicking on a circle, the color should transition, for example, from red to blue. Although I attempted using background-co ...

javascripthtml

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

javascripthtmlcss

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...

javascriptcssreactjstypescriptstyled-components

Produces consistent results despite variations in tag names within the DOM

While iterating over each element (post) in an array, I have assigned each HTML tag name a value of post._id. In the DOM, the outputs have different values as expected. However, when I try to capture these values in the React Profile component, the console ...

javascripthtml

How to customize CSS slider animation - sleek CSS slider with navigation feature?

My goal is to build a CSS-only automatic animated slider with navigation buttons. While the slider animation and navigation function separately, combining them causes the automatic animation to override the navigation system, preventing me from switching b ...

htmlcssslidercss-animations

The jQuery fade speed effect has a limitation where it can only be utilized

When a specific link is clicked, I want a div to display with a fadeIn effect and then fadeOut when the link is clicked again. However, after the first click following an HTTP request, the fadeIn works but the fadeOut does not (the div closes though). More ...

jquerycss

Javascript and the Cookie Conundrum

My goal is to use Javascript to create a cookie that stores the value of an input field with the id "username" every time a button is pressed. Then, I want to retrieve and display that cookie value on the website. I attempted to implement this myself to te ...

javascripthtmlcookies

Is it possible to use Prettier in ESLint for formatting Markdown and CSS files?

At the moment, I have Prettier set up with ESLint using the configuration provided in my .eslintrc.json file: { "extends": ["react-app", "plugin:prettier/recommended"] } Everything works smoothly for linting and formatting JavaScript files. However, I ...

cssmarkdowneslintprettier

Is it possible to modify the inline onkeyup function?

Looking for a solution to change the onkeyup function in a textarea element from 255 characters to 150 characters without directly editing the code? <textarea cols="50" rows="4" id="textbox" onkeyup="limitArea(this, 255, '')"></textarea ...

javascriptjqueryhtml

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

cssspring-mvc

The top border of the body element is contained within the viewport and does not

Looking to add a purple line across the top of my website without using an image. I've opted for the border-top property on the body element. However, when resizing the browser window, the purple line only remains in the viewport area, resulting in a ...

cssborderviewport

Encountering an IndexError while iterating through a table in Selenium using Python due to a list index being out of range

Encountering IndexError: list index out of range while iterating through an HTML table but unsure about the cause. My function for iterating through the table involves clicking on web page frames and downloading files from another frame. The table consis ...

pythonhtmlselenium

Adjust the background color of the date and time selection tool

Trying to customize the background of a datetime picker created using jquery.pttimeselect.js. Despite linking the correct css file (jquery.pttimeselect.css), I am unable to change the background color. Any suggestions on how to successfully modify the ba ...

jquerycssdatetimepicker