Fix for webkit browsers bug on mac os.

Bug fix. On load a page with selected options, it was getting a wrong value.

Readme updated.

Author: vebersol

README.md

@@ -28,7 +28,24 @@ A plugin to generate accessible custom forms: select, radio, checkbox.
 </script>
 ```
 
-# Options
+# API
+
+### $.customForm(options)
+
+Use this method to build the custom forms.
+
+### Options
+
+Options should be an object like:
+
+```javascript
+var options = {
+	prefix: 'my-own-prefix',
+	keyClass: 'my-own-key-class'
+};
+
+$.customForm(options);
+```
 
 * **prefix:** (String)  
 A prefix to add to all class names used on elements created by this plugin.  

css/style.css

@@ -65,4 +65,9 @@ label.lblr {
 
 .custom-form-radio.custom-form-checked.custom-form-focused {
 	background-position:-92px -39px;
+}
+
+/* fix select height bug on webkit browsers for Mac OS */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	select.cform {-webkit-appearance: menulist-button;}
 }

index.html

@@ -21,7 +21,7 @@ <h1>jQuery Custom Forms</h1>
 				<fieldset>
 					<legend>Custom form</legend>
 
-					<p>
+					<p class="select-wrapper">
 						<label for="select">Select your option</label><br>
 						<select name="data[select]" class="cform">
 							<option value=""></option>

jquery.custom.forms-0.5.js

@@ -173,7 +173,7 @@
 		},
 
 		createFakeElement: function(element, type) {
-			var value = (type == 'select') ? element.val() : '';
+			var value = (type == 'select') ? $(element).children('option[value="'+element.get(0).value+'"]').html() : '';
 			return $('<span class="'+ this.setClass(type) +'">'+ value +'</span>');
 		},