JSFiddle - React, Tailwind, and code Playground

by ChrisLTD

HTML

Body Classes: <b id="bodyClasses"></b>

<br><br>

<label class="hide-label" for="your-name">Your Name</label>
<input type="text" name="your-name" id="your-name" placeholder="Your Name">
    
<label for="your-name">Your Name</label>
<input type="text" name="your-name" id="your-name">

CSS

.placeholder .hide-label {
  display: none;
}

JavaScript

// Test for placeholder support with jquery
var htmlEl = document.getElementsByTagName('html');
htmlEl = htmlEl[0]; // first result is the html tag
var inputTest = document.createElement('input');
if( inputTest.hasOwnProperty('placeholder') ) {
  htmlEl.className += ' ' + 'placeholder';
} else {
  htmlEl.className += ' ' + 'no-placeholder';
}

// Test for placeholder support with jquery
/*var inputTest = document.createElement('input');
if( inputTest.hasOwnProperty('placeholder') ) {
  $('html').addClass('placeholder');
} else {
  $('html').addClass('no-placeholder');
}*/

// Output info for debugging
var bodyClassList = document.getElementById('bodyClasses');
bodyClassList.innerHTML = htmlEl.className;