html - 我如何检查伪元素 webkit-calendar-picker-indicator

Question

这个问题在这里已经有了答案:





Inspect webkit-input-placeholder with developer tools

(2 个回答)


去年关闭。




请帮助我使用开发人员工具检查伪元素 webkit-calendar-picker-indicator。

我在我的 html 和 css (scss) 中输入了 type = date:

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;
}

如何使用开发人员工具检查这个？我可以看到输入的样式，但不能看到日历选择器指示器的样式。是否可以查看和编辑此伪元素的样式？

Answer 1

重复:Inspect webkit-input-placeholder with developer tools
在 DevTools 的设置中启用 [Show user agent Shadow DOM]。