How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?

by

One day I’ll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html

In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.

Then use JS to determine if the label should be visible or not based on focusing.

Apply different styles when JS is not available to position the label beside the element instead.

Unlike using the value, this doesn’t render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.

More Related Contents:

  1. Can't get footer image to display in IE8?
  2. Hide scroll bar, but while still being able to scroll
  3. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  4. IE8 issue with Twitter Bootstrap 3
  5. How to remove the arrow from a select element in Firefox
  6. IE8 support for CSS Media Query
  7. Using “margin: 0 auto;” in Internet Explorer 8
  8. Setting transform-origin on SVG group not working in Firefox
  9. Remove outline from select box in FF
  10. Div 100% height works on Firefox but not in IE
  11. Flexbox column-reverse in Firefox, Edge and IE
  12. Why does a filter gradient on a pseudo element not work in IE8?
  13. Table tbody scroll in IE8
  14. How do I make Firefox auto-refresh on file change?
  15. Hover effects not working with IE8
  16. transition for background-image in firefox?
  17. Different implementation of Flexbox in Firefox and Chrome
  18. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  19. Style a checkbox in firefox — remove check and border
  20. :before && :after pseudo elements not showing Firefox
  21. Will targeting IE8 with conditional comments work?
  22. Firefox 30 is not hiding select box arrows anymore
  23. “break-inside: avoid-column” doesn’t work in Firefox
  24. text-decoration not working for visited state link
  25. Is it possible to change the order of list items using CSS3?
  26. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  27. 2 colors in one placeholder of input field
  28. Flex elements ignore percent padding in Firefox
  29. What’s wrong with this div? [closed]
  30. float does not work in a flex container

Leave a Comment