How To Perfectly Style And Create A Dropdown And A vertically Scrollable Div With CSS.
This article will learn us how to style the <select> dropdown list and create a vertically scrollable div using CSS & will understand its implementation through the examples.
Styling A <select> Dropdown With CSS
A CSS dropdown menu can be designed in many ways. Dropdown Menus are mainly used for selecting elements from a list. Every menu item can be described by an "option" element nested inside a "select" element. Each "option" element will have a value attribute specifying the data value sent to the server when that specific option is chosen. Style And Create A Dropdown explanation with an example.
Example 1: The dropdown CSS property displays the dropdown box's visual characteristics. It includes the CSS property to change the font size, text color, cursor pointer, and dropdown background color, among other things.
<!DOCTYPE html>
<html>
<head>
<style>
select { appearance: none; outline: 0; background: lightgreen; background-image: none; width: 100%; height: 100%; color: black; cursor: pointer; border: 1px solid black; border-radius: 3px; } .select { position: relative; display: block; width: 15em; height: 2em; line-height: 3; overflow: hidden; border-radius: .25em; padding-bottom: 10px; } h1 { color: red; }
</style>
</head>
<body>
<center>
<h1>HubToLearn</h1>
<div class="select">
<select name="slct" id="slct">
<option>English Language Topics</option>
<option value="1">Adverb of Place</option>
<option value="2">Adverb of Time</option>
<option value="3">Adverb of Frequency</option>
<option value="4">Adverb of Manner</option>
<option value="5">Adverb of Degree</option>
<option value="6">Adverb of Reason</option>
</select>
</div>
</center>
</body>
</html>
Example 2: This example uses the CSS properties -webkit-, -moz-, and -ms- to show how the dropdown box will look in different browsers.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; } select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; background: lightgreen; background-image: none; border: 1px solid black; } .select { position: relative; display: block; width: 20em; height: 3em; line-height: 3; background: #2C3E50; overflow: hidden; border-radius: .25em; } select { width: 100%; height: 100%; margin: 0; padding: 0 0 0 .5em; color: #fff; cursor: pointer; } select::-ms-expand { display: none; } .select::after { content: '\25BC'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 1em; background: #34495E; pointer-events: none; } .select:hover::after { color: #F39C12; } <!-- For different browsers --> .select::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease; }
</style>
</head>
<body>
<center>
<h1>HubToLearn</h1>
<div class="select">
<select name="slct" id="slct">
<option>English Language Topics</option>
<option value="1"> Adverb of Place</option>
<option value="2">Adverb of Time</option>
<option value="3">Adverb of Frequency</option>
<option value="4">Adverb of Manner</option>
<option value="5">Adverb of Degree</option>
<option value="6">Adverb of Reason</option>
</select>
</div>
</center>
</body>
</html>
The CSS language is the foundation for webpage development and is used to style websites and web applications. Our CSS tutorial and CSS examples will help you learn CSS from the ground up.
Creating A Vertically Scrollable <div> Using CSS
Dealing with divs has become routine. They are employed for various purposes, including the structuring and division of our code. Divs can have numerous properties that we can add or modify to make our websites or web pages responsive, but sometimes we overlook other techniques or properties that could be used when creating a website or web page. These properties can also make our work easier because they can occasionally reduce the number of codes required. We can make a <div> scrollable vertically using CSS. The overflow property can be used to accomplish it quickly.
The task of creating a vertically scrollable div is not as difficult as it initially appears. You must utilize the overflow property to create a div that can scroll vertically for your website or web page. The overflow property has different values. The "auto" value will only add a vertically scrollable bar, while overflow: auto; an axis hiding procedure like overflow-x: hidden; and overflow-y: auto; will make a bar scrollable vertically and horizontally.
The x and y axes can be used to create a scrollable bar. To automatically hide the horizontal scrollbar and display a vertical scrollbar, set the overflow-x: hidden; and overflow-y: auto; properties.
Here is an example where the <div> is vertically scrollable.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #006969;
color: #fff;
width: 400px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
text-align: justify;
}
</style>
</head>
<body>
<h1>An example of a vertically scrollable div</h1>
<div>
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
Hi, welcome to HubToLearn. Hi, welcome to HubToLearn. Hi, welcome to HubToLearn.
</div>
</body>
</html>
Want to learn more about CSS? Visit our CSS Tutorial Page.
