How to Create Simple Dropdown using only HTML & CSS

Description:

how to create, simple dropdown, simple dropdown, multi dropdown, multinav, nav, navigation

SOURCE CODE

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>SIMPLE text animation in HTML CSS</title>
<link rel="stylesheet" href="./style.css">
<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    background-color: orangered;
    background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

p{
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    text-align: center
}

select{
    width: 350px;
    outline: none;
    border: 1px solid #fff;
    padding: 1rem;
    font-size: 1.1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
    cursor: pointer;
}

select:focus,
select:hover{
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.329);
}</style>
</head>
<body>
	<div class="container">
      <select name="menu" id="meun-items">
        <option disabled selected>Select Movie Gendre</option>
        <option value="html">Comedy</option>
        <option value="css">Thriller</option>
        <option value="js">Family</option>
        <option value="c">Science</option>
      </select>
</div>
</body>
</html>

SOFTCODE - HTML CSS JAVASCRIPT Tips and Tricks

How to Create Simple Dropdown using only HTML & CSS

How to Create Simple Dropdown using only HTML & CSS

No comments:

Notifications