Select Box with Placeholder [CSS Only]
How do I make an select box with placeholder [css only]?
What is a select box with placeholder [css only]? How do you make a select box with placeholder [css only]? This script and codes were developed by James Nowland on 31 October 2022, Monday.
Select Box with Placeholder [CSS Only] - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Select Box with Placeholder [CSS Only]</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/kzyqxp.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div include="form-input-select()"> <select required> <!-- This is how we can do "placeholder" options. note: "required" attribute is on the select --> <option value="" hidden >Example Placeholder</option> <!-- normal options --> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select>
</div> <script src="js/index.js"></script>
</body>
</html>
Select Box with Placeholder [CSS Only] - Script Codes CSS Codes
// Demo Colors
$demo-blue: #005BA6;
$demo-gray: #D6D6D6;
$demo-placeholder: #C7C7C7;
$demo-border: #E6E6E6;
$border-width: 3px;
// Select function
@mixin form-input-select(){ @include _select-form-reset; color: $demo-blue; display: block; border-radius: 0; box-shadow: none; font-size: 16px; // padding: 11px 15px; margin-top: 9px; margin-bottom: 15px; width: 100%; &::before, &::after { content: ''; display: block; position: absolute; pointer-events: none; // Arrow clickable in some browsers // triangle set up border: 1px solid transparent; // reset all borders width: 0; height: 0; right: 16px; } // top arrow &::before { bottom: 55%; border-width: 0 6.5px 8px 6.5px; border-bottom-color: $demo-gray; } // bottom arrow &::after { border-width: 8px 6.5px 0 6.5px; border-top-color: $demo-gray; top: 55%; } // firefox is outside the div @-moz-document url-prefix() { border-right: $border-width solid $demo-border; &:hover { border-right: $border-width solid $demo-blue; } } &:hover { select { box-shadow: 0 2px 3px rgba($demo-blue, 0.1) inset; border-color: $demo-blue; // outline is critical but when we are hovering the div has the border already. &:focus { outline-color: transparent; } } &::before { border-bottom-color: $demo-blue; } &::after { border-top-color: $demo-blue; } } // Make sure you set all padding, borders on this select and not the parent div. // this is mainly for :focus and tabbing. select { border: $border-width solid $demo-border; border-radius: 0; font-weight: 400; color: inherit; padding: 11px 15px; line-height: normal; transition: border-color 0.2s ease, outline 0.2s ease; // we really need this for the tabbers // causes double borders though &:focus { box-shadow: 0 3px 4px rgba($demo-blue, 0.3) inset; // outline is critical for usability outline: $border-width solid $demo-blue; outline-offset: -#{$border-width}; //offset vs width } &[disabled], &:disabled{ opacity: 0.4; cursor: not-allowed; } // we use invalid like a placeholder &:invalid { color: $demo-placeholder; } }
}
// Show the function
[include*="form-input-select()"] { @include form-input-select();
}
body { display: flex; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; padding: 10px; border: 1em solid $demo-blue; div { max-width: 16em; }
}
// begin spec stuff up
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
// end stuff up
Select Box with Placeholder [CSS Only] - Script Codes JS Codes
// cross browser native select that has a placeholder styling
// The include="" selecor is just a way of documenting what functions do in scss lib
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 4.5 |
Size | 5,690 Kb |
Views | 40,480 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Step 3 | 3,874 Kb |
Pure CSS Spinner | 3,909 Kb |
Outer Gradient Circle Progress | 17,247 Kb |
SVG Modified with Query String | 1,663 Kb |
Three Heading Solutions | 11,415 Kb |
Lorem pixel Images | 2,290 Kb |
Animating Scale with text featuring blurry raster DPI issues | 2,983 Kb |
Download Rebound | 10,865 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
CSS Ribbon with inner border. | 166,994 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
SVG Playground | Roygwells | 1,834 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
CSS Patterns | Alyda | 3,953 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!