Skip to content

Instantly share code, notes, and snippets.

@devinci-it

devinci-it/demo.html

Last active January 28, 2024 11:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devinci-it/8dffdd5b540372adb25d46f7e59da641 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devinci-it/8dffdd5b540372adb25d46f7e59da641 to your computer and use it in GitHub Desktop.
Download ZIP
css_forms_demo
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../typography.css">
<link rel="stylesheet" type="text/css" href="../form.css">
<style>
form{
width: 400px;
margin:20px auto;
border-bottom: solid 1px #ccc;
}
body{
width: 100vw;
}
</style>
</head>
<body>
<!-- Simple form -->
<form>
<label class="label form-label" for="simple-input">BASIC INPUT</label>
<input class="input form-input" id="simple-input" type="text" placeholder="Simple Input">
<input class="input form-input" id="disabled-input" type="text" placeholder="Disabled Input" disabled>
<input class="input form-input error" id="error-input" type="text" placeholder="Error Input">
<input class="input form-input success" id="success-input" type="text" placeholder="Error Input" value="Valid Input"disabled>
<button class="btn form-btn" type="submit">Submit</button>
<script src="https://gist.github.com/devinci-it/8dffdd5b540372adb25d46f7e59da641#file-basic_input-html.js"></script>
</form>
<!-- Form with select box -->
<form>
<label class="label form-label" for="select-input">Select Box:</label>
<select class="select form-select" id="select-input">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button class="btn form-btn" type="submit">Submit</button>
</form>
<!-- Form with checkboxes -->
<form>
<label class="label form-label" for="checkbox-input">Checkboxes:</label>
<div id="checkbox-input" class="form-checkbox-group">
<input class="checkbox form-checkbox" type="checkbox"> Option 1
<input class="checkbox form-checkbox" type="checkbox"> Option 2
<input class="checkbox form-checkbox" type="checkbox"> Option 3
</div>
<button class="btn form-btn" type="submit">Submit</button>
</form>
<!-- Form with radio buttons -->
<form>
<label class="label form-label" for="radio-input">Radio Buttons:</label>
<div id="radio-input" class="form-radio-group">
<input class="radio form-radio" type="radio" name="option"> Option 1
<input class="radio form-radio" type="radio" name="option"> Option 2
<input class="radio form-radio" type="radio" name="option"> Option 3
</div>
<button class="btn form-btn" type="submit">Submit</button>
</form>
<!-- Form with textarea -->
<form>
<label class="label form-label" for="textarea-input">Textarea:</label>
<textarea class="textarea form-textarea" id="textarea-input"></textarea>
<button class="btn form-btn" type="submit">Submit</button>
</form>
</body>
</html>
Raw
forms.css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
/**
* forms.css
*
* This CSS file provides modern styling for various form elements, including inputs with icons
* and plain inputs. It uses CSS variables for scalability.
*
* Demo:
*
* CSS Classes:
* - .label: Styles for labels
* - .input, .select, .checkbox, .radio, .textarea: Styles for various input elements
* - .btn, .submit-button, .clear-button: Styles for buttons
* - .error, .alert, .success, .info: Styles for different alert messages
*
* :root: Color and typography variables for easy customization
* --font-family: 'Outfit', sans-serif;
* --font-weight: 500;
* --background-color: #f6f8fa;
* --text-color: #23282e;
* --border-color: rgb(208, 215, 222);
* --border-radius: 4px;
* --transition-duration: 0.3s;
* --primary-hover-color: #e5e8eb;
* --focus-outline-color: #0366d6;
* --focus-box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
* --error-border-color: #ff5252;
* --error-bg-color: #ffeeee;
* --alert-border-color: #ffca28;
* --alert-bg-color: #fff9e7;
* --sucess-border-color: #4caf50;
* --sucess-bg-color: #e8f5e9;
* --info-border-color: #0366D6;
* --info-bg-color: #c8ddf5;
*
* Label styles:
* - .label
*
* Input styles:
* - .input, .select, .checkbox, .radio, .textarea
*
* Button styles:
* - .btn, .submit-button, .clear-button
*
* Form and fieldset styles:
* - form
* - fieldset
* - legend
*
* Checkbox and radio styles:
* - .form-checkbox, .form-radio
* - .form-checkbox-group label, .form-radio-group label
*
* Additional button style:
* - .btn
*
* Error, Alert, and Info alert styles:
* - .error
* - .alert
* - .success
* - .info
* - .success:hover
*/
:root {
/* Color and typography variables for easy customization */
--font-family: 'Outfit', sans-serif;
--font-weight: 500;
--background-color: #f6f8fa;
--text-color: #23282e;
--border-color: rgb(208, 215, 222);
--border-radius: 4px;
--transition-duration: 0.3s;
--primary-hover-color: #e5e8eb;
--focus-outline-color: #0366d6;
--focus-box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
--error-border-color: #ff5252;
--error-bg-color: #ffeeee;
--alert-border-color: #ffca28;
--alert-bg-color: #fff9e7;
--sucess-border-color: #4caf50;
--sucess-bg-color: #e8f5e9;
--info-border-color:#0366D6;
--info-bg-color:#c8ddf5;
}
/* Label styles */
.label {
font-family: var(--font-family);
font-weight: var(--font-weight);
color: var(--text-color);
}
/* Input styles */
.input,
.select,
.checkbox,
.radio,
.textarea {
padding: 8px 16px;
font-family: var(--font-family);
font-weight: var(--font-weight);
background-color: var(--background-color);
color: var(--text-color);
border: solid 1px var(--border-color);
border-radius: var(--border-radius);
transition: border-color var(--transition-duration) ease;
}
.input:hover,
.select:hover,
.checkbox:hover,
.radio:hover,
.textarea:hover {
background-color: var(--primary-hover-color);
}
.input:focus,
.select:focus,
.checkbox:focus,
.radio:focus,
.textarea:focus {
outline: none;
border-color: var(--focus-outline-color);
box-shadow: var(--focus-box-shadow);
}
/* Button styles */
.btn,
.submit-button,
.clear-button {
padding: 8px 16px;
font-family: var(--font-family);
font-weight: var(--font-weight);
background-color: var(--background-color);
color: var(--text-color);
border: solid 1px var(--border-color);
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color var(--transition-duration) ease;
}
.btn:hover,
.submit-button:hover,
.clear-button:hover {
background-color: var(--primary-hover-color);
}
.btn:focus,
.submit-button:focus,
.clear-button:focus {
outline: none;
border-color: var(--focus-outline-color);
box-shadow: var(--focus-box-shadow);
}
/* Form and fieldset styles */
form {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 50px;
}
fieldset {
display: flex;
align-items: baseline;
justify-content: center;
align-content: stretch;
flex-direction: row;
gap: 10px;
border: none;
}
legend {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
label {
font-size: 16px;
margin-bottom: 8px;
}
input,
select {
width: 100%;
padding: 8px;
margin-bottom: 12px;
box-sizing: border-box;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 13px;
}
/* Additional button style */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 20px;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
color: #24292e;
background-color: #f6f8fa;
border: 1px solid #d1d5da;
border-radius: 35px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
text-decoration: none;
}
.btn:hover {
background-color: #e1e4e8;
}
/* Checkbox and radio styles */
.form-checkbox,
.form-radio {
margin: 0 10px 0 0;
vertical-align: middle;
}
.form-checkbox-group label,
.form-radio-group label {
display: flex;
align-items: center;
margin: 5px 0;
min-width: 50px;
}
.form-checkbox-group label, .form-radio-group label {
display: flex;
align-items: center;
margin: 5px 0;
font-family: var(--font-family);
flex-direction: row;
justify-content: space-evenly;
font-size: smaller;
}
/* Error, Alert, and Info alert styles */
.error {
border-color: var(--error-border-color) !important;
background-color: var(--error-bg-color) !important;
}
.alert{
border-color: var(--alert-border-color) !important;
background-color: var(--alert-bg-color) !important;
}
.success{
border-color: var(--sucess-border-color) !important;
background-color: var(--sucess-bg-color); !important;
}
.info{
border-color: var(--info-border-color) !important;
background-color: var(--info-bg-color)!important;
}
.success:hover{
background-color: var(--sucess-bg-color); !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment