JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <h1 class="text-center">
        Fixing Bootstrap Styled Inputs for <abbr title="Internet Explorer">IE</abbr>
    </h1>
    <div class="alert alert-info only-show-in-ie">
        <span>
            You are viewing this page using <strong>Internet Explorer
            <span class="only-show-in-ie9">9!</span>
            <span class="only-show-in-ie10">10!</span>
            <span class="only-show-in-ie11">11!</span>
            </strong>
            You should see the custom padding applied to the <code>input</code> element below.
        </span>
    </div>
    <div class="alert alert-warning do-not-show-in-ie">
        You are using a browser other than IE! You won't see the padding changes, as your browser should display the text correctly by default.
    </div>
    <div class="row">
        <div class="form-group col-xs-3">
            <label for="default-padding">Default Padding</label>
            <input type="text" id="default-padding" class="form-control text-right default-padding" value="1234567890" />
            <p class="help-block">
                <em>Padding in px:</em><br/>
                <code>
                    <script>document.write(JSON.stringify($('#default-padding').padding()));</script>
                </code>
            </p>
        </div>
        <div class="form-group col-xs-3 col-xs-offset-3">
            <label for="custom-padding">Custom Padding</label>
            <input type="text" id="custom-padding" class="form-control text-right custom-padding" value="1234567890" />
            <p class="help-block">
                <em>Padding in px:</em><br/>
                <code>
                    <script>document.write(JSON.stringify($('#custom-padding').padding()));</script>
                </code>
            </p>
        </div>
    </div>
    <div class="well well-sm">
        <abbr...

CSS

.only-show-in-ie9,
.only-show-in-ie10,
.only-show-in-ie11,
.only-show-in-ie { display: none; }

html[data-useragent*='Trident'] input.custom-padding { padding: 6px 0 6px; }
html[data-useragent*='Trident'] .only-show-in-ie { display: inherit; }
html[data-useragent*='Trident'] .do-not-show-in-ie { display: none; }

html[data-useragent*=' Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko'] .only-show-in-ie11 { display: inherit; }
html[data-useragent*=' Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko'] .do-not-show-in-ie11 { display: none; }
html[data-useragent*='MSIE 10.0'] .only-show-in-ie10 { display: inherit; }
html[data-useragent*='MSIE 10.0'] .do-not-show-in-ie10 { display: none; }
html[data-useragent*='MSIE 9.0'] .only-show-in-ie9 { display: inherit; }
html[data-useragent*='MSIE 9.0'] .do-not-show-in-ie9 { display: none; }

JavaScript

document.documentElement.setAttribute('data-useragent', navigator.userAgent);

/**
 * @preserve JSizes - JQuery plugin v0.33
 *
 * Licensed under the revised BSD License.
 * Copyright 2008-2010 Bram Stein
 * All rights reserved.
 */
/*global jQuery*/
(function ($) {
	'use strict';
	var num = function (value) {
			return parseInt(value, 10) || 0;
		};

	/**
	 * Sets or gets the values for min-width, min-height, max-width
	 * and max-height.
	 */
	$.each(['min', 'max'], function (i, name) {
		$.fn[name + 'Size'] = function (value) {
			var width, height;
			if (value) {
				if (value.width !== undefined) {
					this.css(name + '-width', value.width);
				}
				if (value.height !== undefined) {
					this.css(name + '-height', value.height);
				}
			} else {
				width = this.css(name + '-width');
				height = this.css(name + '-height');
				// Apparently:
				//  * Opera returns -1px instead of none
				//  * IE6 returns undefined instead of none
				return {'width': (name === 'max' && (width === undefined || width === 'none' || num(width) === -1) && Number.MAX_VALUE) || num(width), 
						'height': (name === 'max' && (height === undefined || height === 'none' || num(height) === -1) && Number.MAX_VALUE) || num(height)};
			}
			return this;
		};
	});

	/**
	 * Returns whether or not an element is visible.
	 */
	$.fn.isVisible = function () {
		return this.is(':visible');
	};

	/**
	 * Sets or gets the values for border, margin and padding.
	 */
	$.each(['border', 'margin', 'padding'], function (i, name) {
		$.fn[name] = function (value) {
			if (value) {
				if (value.top !== undefined) {
					this.css(name + '-top' + (name === 'border' ? '-width' : ''), value.top);
				}
				if (value.bottom !== undefined) {
					this.css(name + '-bottom' + (name === 'border' ? '-width' : ''), value.bottom);
				}
				if (value.left !== undefined) {
					this.css(name + '-left' + (name === 'border' ? '-width' : ''), value.left);
				}
				if (value.right !== undefined)...