Menu
Please help me to inspect pseudo element webkit-calendar-picker-indicator with developer tools.
I have input with type = date in my html, and css (scss) for this:
input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=date]{
-webkit-appearance: none;
padding-right: 0;
height: 2.23rem;
}
input[type="date"]::-webkit-calendar-picker-indicator{
-webkit-appearance: none;
opacity: 1;
color: rgba(0, 0, 0, 0);
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1OSAzOCIgd2lkdGg9IjU5IiBoZWlnaHQ9IjM4Ij4NCgk8ZGVmcz4NCgkJPGNsaXBQYXRoIGNsaXBQYXRoVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0iY3AxIj4NCgkJCTxwYXRoIGQ9Ik0tMTA4NyAtNjMyTDgzMyAtNjMyTDgzMyAxNTgzTC0xMDg3IDE1ODNaIiAvPg0KCQk8L2NsaXBQYXRoPg0KCQk8aW1hZ2Ugd2lkdGg9IjU5IiBoZWlnaHQ9IjM4IiBpZD0iaW1nMSIgaHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFEc0FBQUFtQ0FNQUFBQk5zeFBFQUFBQUFYTlNSMElCMmNrc2Z3QUFBTHBRVEZSRkFBQUF0TFMwdExTMHRMUzB0TFMwdExTMHRMUzB0TFMweHNiRzR1TGk3Ky92OHZMeTA5UFQxTlRVdExTMHRMUzB0TFMweDhmSHRMUzB0TFMwMjl2YnM3T3p5c3JLM3Q3ZTVlWGx6TXpNdTd1NzhmSHg2dXJxMXRiVzdlM3R3OFBEMnRyYXljbkp0N2Uzd01EQXZyNiszOS9mMTlmWHhNVEU4UER3dkx5ODdPenM2ZW5wemMzTnVibTUwdExTMGRIUnhjWEY3dTd1ejgvUDBORFE1dWJtMmRuWjFkWFYzTnpjeU1qSXpzN090TFMwdExTMHRMUzB0TFMwdU03WEtRQUFBRDUwVWs1VEFBWnV4L1AvRzgvLy8vLy8vLy9RQjIzLytmai8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vOUZ2eS9Ud2NtQ3BBQUFCbTBsRVFWUjRuTjNWMjNLQ01CQUdZQlZUSmVzcHJZc0NBaXJRNHJIR1kxdjEvVityZ1lEVm1jSUl2WENtL3cxTW1BOUNzckNsMGdOVHJpaFZraU5WcFZLTzZWT3RybExJRWFyV2EwL3lxYlZHSGlqVGJMVkQyNm5ucHdDc0UxcEZMV0pWSmJUUHVkNDFDWDBKTFNsQ0FjaC9zRjNVNUFuRDN0VndYemNJTWZSK2hqVUhGakpiRmJFZEhBN01lSmlPRU1ldU8wWWMwVlNyYThMMlVLUW5yS2JIMUVYUE53ZTI2WHZvMGpScmFLK0pmY091WnNqUkViSUF3QkYzQ2hpT1V1MWs2cy9tb1ozUGZIc2liUjg5UWNFSkZ5THdzSjltY2VGNEdNVnpGaWl0amo0a0ZuelVVKzFOcERYRzVvODF4MGFxWFE0dmVZOHRjYU9Ec3hMTFB3T1hwRnB1cnkzWWJNQmEyL3pXcnNLWnVKbDJLd1NpT052eTJ6a0hBeEdhTldmT0d6dlk3MkhYNFB4MnJXU3kxb3JUcmcrSEEvaGRtdGg0ajZKazd0RXZjNDVySTZKWnRZRjhxaTFCMTJHcFRTOVcxcVRZbjh5YW5PREg1eVVNSi9Id1hkK0NSYTVMZzFpWEMzZDhnN255VUZ2dy8xejlhMStvc0NLV1ZVTGJialh6MCtaWHUyai9aWEgvRlIzNGVEcm42ZnZuMHpIcCswWHpEUXJNYTlkZ014am1BQUFBQUVsRlRrU3VRbUNDIi8+DQoJPC9kZWZzPg0KCTxzdHlsZT4NCgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQ0KCTwvc3R5bGU+DQoJPGcgaWQ9Ik9mZmVyaW5nX2RldGFpbHNfdjMiIGNsaXAtcGF0aD0idXJsKCNjcDEpIj4NCgkJPGcgaWQ9IlJlc2VydmUgaW52ZXN0bWVudCBtb2RhbCI+DQoJCQk8dXNlIGlkPSJjYWxlbmRhciBLb3BpZSIgaHJlZj0iI2ltZzEiIHg9IjAiIHk9IjAiIC8+DQoJCTwvZz4NCgk8L2c+DQo8L3N2Zz4=") no-repeat;
height: 93%;
width: 2.8rem;
top: 0;
z-index: 0;
position: absolute;
right: 3.1rem;
top: -2px;
bottom: 0px;
}
How can I inspect this one with developer tools? I can see styles for input but not for calendar-picker-indicator. Is it possible to see and edit styles for this pseudo element?
285
Currently, there is no cross browser, script-free way of styling a native date picker. As for what's going on inside WHATWG/W3C... If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard.
Just make the calendar-picker icon the full height and width of the input!
<input type="date"> <input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time.
Duplicate: Inspect webkit-input-placeholder with developer tools
Enable [Show user agent Shadow DOM] in the settings of DevTools.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
