Radio Button, Search, recommended Words
How do I make an radio button, search, recommended words?
What is a radio button, search, recommended words? How do you make a radio button, search, recommended words? This script and codes were developed by Jovan on 08 November 2022, Tuesday.
Radio Button, Search, recommended Words - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Radio Button, Search, recommended Words</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="input"> <input type="radio" id="radio1" name="je"> <label for="radio1">Radio 1</label> <input type="radio" id="radio2" name="je"> <label for="radio2">Radio 2</label> <br> <input type="text" id="autocomplete"> </div> <div class="rec"> <ul> <li><a href="#">Kvo</a></li> <li><a href="#">Kvocka</a></li> <li><a href="#">Kvostaaaasda</a></li> <li><a href="#">Kvod</a></li> <li><a href="#">Kavasaki</a></li> </ul> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Radio Button, Search, recommended Words - Script Codes CSS Codes
html { background: #1b1b1b;
}
.container { width: 60%; margin: 0px auto; margin-top: 100px; text-align: center; font-size: 2em; color: #788B9C; font-family: sans-serif; position: relative; perspective: 1000px;
}
.input { background: #1b1b1b; border-top: none; border-left: none; border-right: none;
}
input[type="radio"] { display: none;
}
label { position: relative; margin: 0px 20px; transition: 0.3s;
}
label:hover { color: #9bb4c9;
}
label:hover:before { box-shadow: 0px 0px 0px 2px #9bb4c9; transform: scale(1.1);
}
label:before { content: ""; position: absolute; left: -30px; top: 8px; width: 20px; height: 20px; box-sizing: border-box; border: 0px solid #000; box-shadow: 0px 0px 0px 2px #788B9C; border-radius: 100%; transition: 0.3s ease-in-out;
}
input[type=radio]:checked + label:before { border: 5px solid #1b1b1b; background: #788B9C;
}
input[type=text] { margin-top: 20px; border: none; border-bottom: 4px solid #788B9C; padding: 10px; font-size: 1em; outline: none; box-sizing: border-box; color: #788B9C; background: rgba(120, 139, 156, 0.1); width: 20%; transition: 0.3s;
}
input[type=text]:focus { width: 100%;
}
.rec { width: 20%; margin: 0 auto; border: 1px solid #788B9C; border-top: none; box-sizing: border-box; background: #232323; transition: 0.3s; transform-origin: top left; transform-style: preserve-3d; transform: rotateX(-100deg); opacity: 0; font-size: 0.7em; padding: 20px 0px; text-align: left;
}
.rec li { padding: 10px 0px;
}
.rec li a { color: #fff; text-decoration: none;
}
.rotateX { transform: rotateX(0deg); opacity: 1; width: 100%;
}
Radio Button, Search, recommended Words - Script Codes JS Codes
$("input[type=text]").on('focus blur', function(){ $(".rec").toggleClass("rotateX");
});
Developer | Jovan |
Username | DeepsyMusic |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 3,096 Kb |
Views | 16,192 |
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 |
Text Slice CSS3 | 2,067 Kb |
Menu animation | 1,896 Kb |
Job application | 1,654 Kb |
CSS Image Slider | 1,737 Kb |
Button hover shake | 2,066 Kb |
On Scroll Add Class | 2,057 Kb |
A Pen by Jovan | 3,475 Kb |
Preloader css | 1,622 Kb |
Loading animation css | 2,606 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 |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Adding Items | Valhead | 4,008 Kb |
Resume | Rottingroom | 5,483 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!