Form fields styled for cross browser

Developer
Ash Durham
Size
6,351 Kb
Views
4,048
  1. Form fields styled for cross browser Previews
  2. Form fields styled for cross browser HTML Codes
  3. Form fields styled for cross browser CSS Codes
  4. Form fields styled for cross browser JS Codes

How do I make an form fields styled for cross browser?

Styling things like dropdowns and checkboxes is difficult to get consistent cross browser.... Not any more.. What is a form fields styled for cross browser? How do you make a form fields styled for cross browser? This script and codes were developed by Ash Durham on 05 January 2023, Thursday.

Form fields styled for cross browser Previews
IQ Test

Form fields styled for cross browser - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form fields styled for cross browser</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Form Elements - Styled your way</h1>
<form> <label>Select Box</label> <select class='faux' name='select_box'> <option>-- SELECT--</option> <option value="option1">Option one</option> <option value="option2">Option two</option> <option value="option3">Option three</option> <option value="option4">Option four</option> <option value="option5">Option five</option> <option value="option6">Option six</option> <option value="option7">Option seven</option> </select> <label>Checkboxes</label> <ul> <li><input type="checkbox" name='checkbox' class="faux" value="1" /> Option 1</li> <li><input type="checkbox" name='checkbox' class="faux" value="2" /> Option 2</li> <li><input type="checkbox" name='checkbox' class="faux" value="3" /> Option 3</li> <li><input type="checkbox" name='checkbox' class="faux" value="4" /> Option 4</li> <li><input type="checkbox" name='checkbox' class="faux" value="5" /> Option 5</li> </ul> <label>Radio Buttons</label> <ul> <li><input type="radio" name='radio' class="faux" value="1" /> Option 1</li> <li><input type="radio" name='radio' class="faux" value="2" /> Option 2</li> <li><input type="radio" name='radio' class="faux" value="3" /> Option 3</li> <li><input type="radio" name='radio' class="faux" value="4" /> Option 4</li> <li><input type="radio" name='radio' class="faux" value="5" /> Option 5</li> </ul> <input type="submit" value="Show selected values" />
</form>
<div id="show_values"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Form fields styled for cross browser - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
body { padding: 0; margin: 0; background: #f8f8f8; font-family: "Raleway", sans-serif;
}
h1 { text-align: center; color: #00afe6;
}
ul { list-style: none; margin: 0; padding: 0;
}
li { display: block; clear: both; margin-bottom: 10px;
}
p { font-size: 12px;
}
#show_values { width: 300px; margin: 20px auto;
}
form { width: 300px; padding: 20px; border: 1px solid #d7d7d7; background: #ffffff; margin: 0 auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; /* BUTTON FROM https://codepen.io/fivera/pen/aLAGx */ /* SELECT FIELD */ /* CHECKBOX FIELD */ /* RADIO FIELD */
}
form label { font-size: 12px; font-weight: 700;
}
form input[type=submit] { background: #e3e3e3; border: 1px solid #bbb; outline: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6; -moz-box-shadow: inset 0 0 1px 1px #f6f6f6; box-shadow: inset 0 0 1px 1px #f6f6f6; color: #333; font: bold 12px "helvetica neue", helvetica, arial, sans-serif; line-height: 1; padding: 8px 0 9px; text-align: center; text-shadow: 0 1px 0 #fff; width: 150px;
}
form input[type=submit]:hover { background: #d9d9d9; -webkit-box-shadow: inset 0 0 1px 1px #eaeaea; -moz-box-shadow: inset 0 0 1px 1px #eaeaea; box-shadow: inset 0 0 1px 1px #eaeaea; color: #222; cursor: pointer;
}
form input[type=submit]:active { background: #d0d0d0; -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3; -moz-box-shadow: inset 0 0 1px 1px #e3e3e3; box-shadow: inset 0 0 1px 1px #e3e3e3; color: #000;
}
form .faux_select { border: 1px solid #E2E2E2; height: 32px; width: 100%; position: relative; cursor: pointer; background-color: #fff; margin-bottom: 10px;
}
form .faux_select .selected_text { width: 100%; padding-left: 10px; overflow: hidden; line-height: 32px; height: 32px; display: inline-block; background-color: #fff;
}
form .faux_select .handle { width: 32px; height: 32px; margin-right: 0; float: right; border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; background: #f9f9f9; position: absolute; top: 0; right: -1px;
}
form .faux_select .handle:after { top: 50%; position: absolute; left: 50%; content: ''; width: 0; height: 0; margin: -3px 0 0 -6px; border: 6px solid transparent; border-top: 6px solid #666;
}
form .faux_select.open .handle:after { margin: -10px 0 0 -6px; border: 6px solid transparent; border-bottom: 6px solid #666;
}
form .faux_select .options { height: 0; position: absolute; z-index: 1; top: 30px; left: 0; width: 100.1%; overflow-y: scroll; overflow-x: hidden; background: #fff; margin: 0 0 0 -1px;
}
form .faux_select .options span { height: 24px; border-bottom: 1px solid #eee; line-height: 24px; padding: 0 10px; margin: 0; display: block;
}
form .faux_select .options span:hover { background: #eee;
}
form .faux_select.open .options { border: 1px solid #E2E2E2; z-index: 100;
}
form .faux_select select { position: absolute; left: 0; top: 0; z-index: -1; border: 0; height: 1px; width: 1px; outline: none;
}
form .faux_checkbox { height: 20px; width: 20px; border: 1px solid #ddd; border-radius: 4px; float: left; margin-right: 5px; background-color: #fff;
}
form .faux_checkbox .fa-check { display: none; font-size: 25px; position: relative; top: -4px; left: -1px; color: #5da423;
}
form .faux_checkbox.checked { border: 1px solid #aaa; background-color: #fff;
}
form .faux_checkbox.checked .fa-check { display: inline-block;
}
form .faux_checkbox input { width: 0; height: 0; visibility: hidden;
}
form .faux_radio { height: 20px; width: 20px; border: 1px solid #ddd; border-radius: 30px; float: left; margin-right: 5px; background-color: #fff; position: relative;
}
form .faux_radio .fa-circle { display: none; font-size: 16px; position: relative; top: 1px; left: 3px; color: #5da423;
}
form .faux_radio.checked { border: 1px solid #aaa; background-color: #fff;
}
form .faux_radio.checked .fa-circle { display: inline-block;
}
form .faux_radio input { width: 20px; height: 20px; position: absolute; left: -4px; top: -6px; display: inline-block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;
}

Form fields styled for cross browser - Script Codes JS Codes

jQuery(document).ready(function($) {
// FORM ELEMENTS // function isiPhone(){ return ( (navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1) ); } function init_form_styling() { // SELECT // $("select.faux").each(function() { $(this).wrap("<div class='faux_select'></div>"); if (isiPhone()) $(this).parent().prepend("<span class='selected_text'></span><span class='handle'></span>"); else $(this).parent().prepend("<span class='selected_text'></span><span class='handle'></span><span class='options'></span>"); var selected = $(this).children('option:selected').text(); $(this).parent().children('.selected_text').text(selected); var options_container = $(this).parent().children('.options'); $(this).removeClass('faux'); $(this).children('option').each(function() { var value = $(this).val(); var text = $(this).text(); options_container.append('<span class="single-option" data-value="'+value+'">'+text+'</span>'); }); $(this).on('change', function() { var selected = $(this).children('option:selected').text(); var chosen = $(this).children('option:selected').val(); $(this).parent().children('.selected_text').text(selected); var options_container = $(this).parent().children('.options'); options_container.empty(); $(this).children('option').each(function() { var value = $(this).val(); var text = $(this).text(); options_container.append('<span class="single-option" data-value="'+value+'">'+text+'</span>'); }); }); }); // CHECKBOX // $("input[type=checkbox].faux").each(function() { $(this).wrap("<div class='faux_checkbox'></div>"); $(this).parent().prepend("<i class='fa fa-check'></i>"); if ($(this).is(':checked')) { $(this).parent().addClass('checked'); } $(this).removeClass('faux'); }); // RADIO // $("input[type=radio].faux").each(function() { $(this).wrap("<div class='faux_radio'></div>"); $(this).parent().prepend("<i class='fa fa-circle'></i>"); if ($(this).is(':checked')) { $(this).parent().addClass('checked'); } $(this).removeClass('faux'); }); } init_form_styling(); //Stop body scroll $('body').on('mouseenter', '.faux_select .options', function() { $('body').css('overflow', 'hidden'); //console.log('IN'); }).on('mouseleave', '.faux_select .options', function() { $('body').removeAttr('style').css('zoom', '1'); //console.log('OUT'); }); // SELECT // $('body').on('click', '.faux_select', function() { var select = $(this); if (select.children('.options').height() == 0) { //Get combined height of options var optionsHeight = 0; $('.single-option', this).each(function(){ optionsHeight += $(this).height(); }); if (optionsHeight > 150) optionsHeight = 150; else { optionsHeight = select.addClass('open').children('.options').css('height', 'auto').outerHeight(); select.removeClass('open').children('.options').css('height', '0px'); } // Open options window select.children('.options').animate({height:optionsHeight+'px'}, {queue:false, duration:10}); select.addClass('open'); select.children('select').focus(); $(document).on("click", function(e) { // Select boxes if (select.has(e.target).length === 0) { select.children('.options').animate({height:'0px'}, {queue:false, duration:10, complete:function() { $(this).parents(".faux_select").removeClass('open'); }}); $(this).off(e); } }); } }); $('body').on('click', '.faux_select .options span', function() { var value = $(this).data('value'); var text = $(this).text(); $(this).parents('.faux_select').children('.selected_text').text(text); $(this).parents('.faux_select').children('select').val(value); //$(this).parents('.faux_select').children('select').trigger('change'); $(this).parent('.options').delay(100).animate({height:'0px'}, 100, function() { $(this).css({border:'none'}); }); $(this).parents('.faux_select').removeClass('open'); }); $('body').on('change', '.faux_select select', function() { var text = $(this).children('option:selected').html(); $(this).parents('.faux_select').children('.selected_text').text(text); }); // CHECKBOX // $('body').on('click', ".faux_checkbox input[type=checkbox]", function() { if ($(this).is(':checked')) { // Already checked. Uncheck $(this).parent().addClass('checked'); $(this).attr('checked', 'checked'); } else { // Check dat box $(this).parent().removeClass('checked'); $(this).removeAttr('checked'); } }); $('body').on('click', '.faux_checkbox', function() { $(this).children('input[type=checkbox]').trigger('click'); }); // RADIO // $('body').on('click', ".faux_radio input[type=radio]", function() { var name = $(this).attr('name'); $("input[name='"+name+"']").each(function() { if ($(this).is(':checked')) { // Already checked. Uncheck $(this).parent().addClass('checked'); } else { // Check dat box $(this).parent().removeClass('checked'); } }); }); $("form").submit(function(e) { var values = $(this).serializeArray(); $( "#show_values" ).empty(); $.each( values, function( i, field ) { $( "#show_values" ).append( field.name + " = " + field.value + "<br />" ); }); e.preventDefault(); });
});
Form fields styled for cross browser - Script Codes
Form fields styled for cross browser - Script Codes
Home Page Home
Developer Ash Durham
Username ashdurham
Uploaded January 05, 2023
Rating 3
Size 6,351 Kb
Views 4,048
Do you need developer help for Form fields styled for cross browser?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash Durham (ashdurham) Script Codes
Name
Radio status lights with gradients
Fade test
Cross Browser Placeholders
Vertically Align text
Responsive scrolling text
Youtube-like loading bar with pure CSS
Viewport Media Query example 1
Viewport Media Query example 2
Viewport Media Query LESS example
Dynamic video proportion
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!