title: How to inspect ::-webkit-datetime-edit in dev tools
body: <p>I use the <code>::-webkit-datetime-edit</code> CSS property in order to control the appearance of a date input field for webkit browsers. To do further debugging, I would like to inspect it in my dev tools.</p>
  
  <p>But when I inspect my element with Chrome dev tools, I can't see anywhere the css properties associated with <code>::-webkit-datetime-edit</code>. Nor in the "Styles" panel or the "Computed" panel.</p>
  
  <p>Here is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="date"&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>[type="date"]::-webkit-datetime-edit {
    background-color: red;
    color: transparent;
  }
  </code></pre>
  
  <p>Here is a codepen: <a href="https://codepen.io/neiya/pen/jOERJQb" rel="nofollow noreferrer">https://codepen.io/neiya/pen/jOERJQb</a></p>
  
  <p>Is it possible to see and edit these properties with Chrome or other browser dev tools?</p>