Select Box with Placeholder [CSS Only]

Developer
Size
5,690 Kb
Views
40,480

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] Previews

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
Select Box with Placeholder [CSS Only] - Script Codes
Select Box with Placeholder [CSS Only] - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 4.5
Size 5,690 Kb
Views 40,480
Do you need developer help for Select Box with Placeholder [CSS Only]?

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!

James Nowland (jnowland) Script Codes
Create amazing Facebook ads with AI!

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!