iFrame Control Styling

jQuery

by Zuhaib Siddiqui

HTML

<input type="text" class="display-none" placeholder="Name">
		<input type="text" class="form-controll" placeholder="Password">
		<iframe id="myFrame" src="https://getbootstrap.com/css/#forms" height="300" width="100%" border="1"></iframe>

CSS

<style type="text/css">
		.form-controll{
			border: 1px solid #cfcfcf;
		    border-radius: 5px;
		    padding: 10px;
		    margin-bottom: 15px;
		    box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
		}
		.display-none{
			border:1px solid #f00;
		}
	</style>

JavaScript

(function($){
            $.fn.extend({
                iframeStyle: function(options){

                	var settings = $.extend({
                        'border': '',
                        'borderRadius': '',
                        'padding': '',
                        'margin': '',
                        'boxShadow': ''
                      }, options);

                	// Return fuctions
                    return this.each(function() {
                    	var ifcStyle = "border:"+settings.border+';border-radius:'+settings.borderRadius+';padding:'+settings.padding+';margin:'+settings.margin+';box-shadow:'+settings.boxShadow+';';
						//var ifcStyle += ifcStyle.add('border: 1px solid #cfcfcf;border-radius: 5px;padding: 10px;margin-bottom: 15px;box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;');
                    	$(this).contents().find('body').prepend('<style>.form-control{'+ifcStyle+'}</style>');
                    	//$(this).contents().find('body').createElement("style");
                    });

                }
            });
        })(jQuery);


	$(window).load(function () {

		$('#myFrame').iframeStyle({
			border:'1px solid #f00',
			borderRadius:'35px!important',
			padding:'10px',
			margin:'0 0 15px 0',
			boxShadow:'0 0 10px rgba(0,0,0,0.2) inset'
		});
	});