REQUIRED FIELDS - CSS ONLY

by bizamajig

HTML

<input type="text" placeholder="Required" required>

<textarea placeholder="Required" required></textarea>

CSS

body {
  background-color: rgb(0,159,214);
  font: normal 1em Helvetica,Arial;
  padding: 2em;
}
input[type="text"], textarea {
  background-color: #eee;
  border: none;
  border-radius: .125em;
  display: block;
  font: inherit;
  font-size: 1.5em;
  line-height: 2em;
  margin: .5em auto;
  padding: 0 .5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}
input[type="text"][required] {
  background-image: linear-gradient(0deg, transparent, transparent 50%, green 50%, green 100%);
  background-position: top right;
  background-size: .2em 15em; /* .5em .5em; */
  background-repeat: no-repeat;
}
textarea[required] {
  background-image: radial-gradient(red 20%, transparent 25%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

JavaScript

(function ($, window, undefined) {
    "use strict";

    var _bid_attr_name = 'sticky-btn-id';
    var _hidden_state_class = 'hiddenStickyBtn'

    var _defaults = {
        menuBg: '#2c2c2c',
        menuHeight: '20px;',
        menuPadding: '5px 1%',
        menuBtnMargin: '10px'
    };

    var StickyButtons = function (elem, options) {
        this.$el = elem;
        this.options = $.extend(_defaults, options);
        this.init();
    };

    StickyButtons.prototype.init = function () {

        var opts = this.options;
        var that = this;

        var stickToMenuBar = function ($elem) {
            var $menu = getOrCreateMenuBar();
            var bid = $elem.attr(_bid_attr_name);
            if (!bid) {
                bid = guid();
                $elem.attr(_bid_attr_name, bid);
                var $stickyButton = $elem.clone(1);
                $stickyButton.css({
                    'float': 'right',
                    'margin-left': opts.menuBtnMargin
                }).appendTo($menu);
            } else {
                showStickyButton(bid);
            }
            showMenuBar();
        };

        var getOrCreateMenuBar = function () {
            if (!menuBarExists()) {
                $('<div id="stickyMenu"></div>').css({
                    display: 'none',
                    position: 'fixed',
                    top: '0',
                    left: '0',
                    width: '98%',
                    background: opts.menuBg,
                    height: opts.menuHeight,
                    padding: opts.menuPadding
                }).appendTo("body");
            }
            return $("#stickyMenu");
        };

        var menuBarExists = function () {
            return $("#stickyMenu").length;
        };

        var showMenuBar = function () {
            getOrCreateMenuBar().show();
        };

        var hideMenuBar = function () {
            getOrCreateMenuBar().hide();
        };

        var getStickyButtons =...