<form method='post' action='data:text/plain, Form submited.'>
<fieldset>Your name:<br><input type='text'></fieldset>
<fieldset>
Product:
<input type='radio' id='unspecify-product' name='product' value='unspecify' checked>
<label for='unspecify-product'>Unspecify</label>
<br>
<input type='radio' id='desktop-product' name='product' value='desktop'>
<label for='desktop-product'>Desktop</label>
<br>
<input type='radio' id='mobile-product' name='product' value='mobile'>
<label for='mobile-product'>Mobile</label>
</fieldset>
<p><input type='submit' value='Contact Us'></p>
</form>
<p class='explain'>This is a demo that styles form for mobile device.</p>
@mixin greeny-ui {
background-color: YELLOWGREEN;
color: white;
border: 1px solid rgba(0,0,0,.1);
box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 -1px rgba(0,0,0,.1);
&:hover {
background-color: darken(YELLOWGREEN, 10%);
box-shadow: inset 0 1px rgba(255,255,255,.7), inset 0 -1px rgba(0,0,0,.1);
}
&:active {
background-color: YELLOWGREEN;
box-shadow: inset 0 -1px rgba(255,255,255,.1), inset 0 1px rgba(0,0,0,.1);
}
}
* {
box-sizing: border-box;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input[type='text'],
input[type='submit']{
width: 100%;
padding: 1rem .5rem;
font-size: 1rem;
border: 1px solid #efefef;
}
input[type='radio'] {
display: none;
&+label{
display: block;
font-size: 1rem;
padding: 1rem .5rem;
padding-left: 3rem;
border: 1px solid transparent;
}
&:checked+label {
border-color:YELLOWGREEN;
background: lighten(YELLOWGREEN, 49%) url(https://css3effects.com/tick.png) 10px 50% no-repeat;
}
}
input[type="submit"],
input[type="button"]{
appearance: none; /* for mobile safari */
border-radius: 3px;
@include greeny-ui;
}
.explain {
font-size: .8rem;
color: darkgrey;
text-align: center;
}
View Compiled
$("input[type=submit]").bind 'touchstart', (e) ->
e.preventDefault()
$("input[type=submit]").bind 'touchend', (e) ->
e.preventDefault()
$(this).trigger 'click'
View Compiled
This Pen doesn't use any external CSS resources.