Skip to content

Instantly share code, notes, and snippets.

@gunnarbittersmann
Created January 29, 2014 14:59
Show Gist options
  • Save gunnarbittersmann/8689774 to your computer and use it in GitHub Desktop.
Save gunnarbittersmann/8689774 to your computer and use it in GitHub Desktop.
workshop: form 2
/**
* workshop: form 2
*/
*
{
box-sizing: border-box;
}
html
{
color: #666;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
form
{
background: #ccc;
max-width: 20em;
padding: 1em;
border-radius: 1em;
}
.text-input
{
border: 1px solid #aaa;
background: white;
position: relative;
}
.text-input label
{
display: inline-block;
padding: 0.25em;
}
input:not([type="radio"]):not([type="checkbox"])
{
background: none;
position: absolute;
right: 0.25em;
width: 80%;
margin-left: 20%;
border: none;
padding: 0.5em 0.5em 0.5em 0.5em;
}
input:focus
{
background: white !important;
}
input:invalid
{
/*
background-image: url(data:image/jpeg;base64,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);
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.75em;
*/
}
button
{
width: 100%;
padding: 0.25em;
background: #333;
color: #fff;
border: 0;
border-radius: 0.5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
}
button::-moz-focus-inner
{
border: 0;
padding: 0.5em;
}
<form action="">
<p>
<input type="radio" name="gender" id="male"/>
<label for="male">Mr.</label>
<input type="radio" name="gender" id="female"/>
<label for="female">Mrs.</label>
</p>
<p class="text-input">
<label for="name">Name</label>
<input name="name" id="name"/>
</p>
<p class="text-input">
<label for="email">Email</label>
<input type="email" name="email" id="email" required/>
</p>
<p class="text-input">
<label for="password">Password</label>
<input type="password" name="password" id="password" required/>
</p>
<p class="text-input">
<label for="repeat-password">Repeat password</label>
<input type="password" name="repeat-password" id="repeat-password" required/>
</p>
<p>
<input type="checkbox" name="accept-tc" id="accept-tc" required/>
<label for="accept-tc">I accept the terms and conditions.</label>
</p>
<p>
<button type="submit">Register</button>
</p>
</form>
</form>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment