这个问题在这里已经有了答案:
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;
}
如何使用开发人员工具检查这个？我可以看到输入的样式，但不能看到日历选择器指示器的样式。是否可以查看和编辑此伪元素的样式？
最佳答案
重复:Inspect webkit-input-placeholder with developer tools
在 DevTools 的设置中启用 [Show user agent Shadow DOM]。
关于html - 我如何检查伪元素 webkit-calendar-picker-indicator，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58666420/