Skip to content

Instantly share code, notes, and snippets.

@AlanSimpsonMe

AlanSimpsonMe/formcontrols.txt

Created April 5, 2018 22:24
Show Gist options
  • Save AlanSimpsonMe/82452dac07b0eecb3cf7377ce1f77b4a to your computer and use it in GitHub Desktop.
Save AlanSimpsonMe/82452dac07b0eecb3cf7377ce1f77b4a to your computer and use it in GitHub Desktop.
Download ZIP
Style form controls
Raw
formcontrols.txt
<!DOCTYPE html>
<html lang="en">
<head>
<title>Alan Simpson</title>
<style>
/* These can go in an external style sheet, of course. I just put
them here so all of the code would be in one place */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* Body text font (from Google fonts) */
body {
font-family: 'Open Sans', sans-serif;
}
/* Table that contains three controls */
table.controls {
/* Just a suggest, style to taste */
width: 90%;
margin: 1em auto;
max-width: 640px;
}
/* First column of controls table */
table.controls td:nth-child(1) {
text-align: right;
padding-right: 4px;
}
/* Textboxes and textarea in controls table */
table.controls input,
table.controls textarea {
width: 100%;
}
/* All labels (subtle hover affect) */
label:hover {
color: #2950B2
}
/* textboxes, textarea, dropdown, and buttons */
input,
textarea,
select,
button {
display: inline-block;
border: solid 1px #ccc;
border-radius: 5px;
padding: 8px;
margin: 6px 0;
transition: 0.25s;
}
/* Control that has the focus (curstor) */
input:focus,
textarea:focus,
select:focus {
outline: none;
box-shadow: 0 0 3px 3px rgba(109, 150, 255, 0.3);
/* Subtle animation effect */
transition: 0.25s;
}
/* All button types (on this page) */
input[type="submit"],
input[type="button"],
button {
background: #5484FF;
color: white;
}
/* Give slight pushed-out appearance on hover */
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
border: outset 1px gray;
}
/* Give slight pushed-int appearance during click */
input[type="submit"]:active,
input[type="button"]:active,
button:active {
border: inset 1px gray;
}
/* Make checkbox a little larger than default */
input[type="checkbox"] {
width: 22px;
height: 22px;
vertical-align: middle;
}
/* Enlarge radio buttons and increate the gap between them */
input[type="radio"] {
width: 18px;
height: 18px;
vertical-align: middle;
margin-left: 12px;
}
</style>
</head>
<body>
<article>
<!-- Table that contains three controls and three labels -->
<table class="controls">
<tr>
<td>
<label for="tbusername">User Name:</label>
</td>
<td>
<input type="text" placeholder="Username" id="tbusername"> </td>
</tr>
<tr>
<td>
<label for="tbpassword">Password:</label>
</td>
<td>
<input type="text" placeholder="Password" id="tbpassword"> </td>
</tr>
<tr>
<td>
<label for="txlifestory">Life Story:</label>
</td>
<td>
<textarea id="txlifestory"></textarea>
</td>
</tr>
</table>
<p>
<!-- Checkbox, clicking the label in the browser is the
same as clicking the checkbox. -->
<input type="checkbox" id="ckhowdy">
<label for="ckhowdy">&nbsp;I am a checkbox</label>
</p>
<p>
<!-- Dropdown list (select control in HTML) -->
Favorite color:&nbsp;
<input type="radio" id="rb1" name="radios1" value="1">
<label for="rb1">Red</label>
<input type="radio" id="rb2" name="radios1" value="2">
<label for="rb2">Blue</label>
<input type="radio" id="rb3" name="radios1" value="3">
<label for="rb3">Green</label>
</p>
<p>
<!-- Mututally exclusive radio buttons -->
<label for="favefood">Favorite Heath Food:&nbsp;</label>
<select id="favefood">
<option value="1">Snickers</option>
<option value="2">Chuckles</option>
<option value="3">Milky Way</option>
<option value="4">Almond Joy</option>
</select>
</p>
<p>
<!-- Submit and button buttons -->
<input type="submit" value="Submit Button">
</p>
<p>
<input type="button" value="Input Button">
</p>
<p>
<!-- Button tag button -->
<button>Button button</button>
</p>
</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment