HTML Textbox with a clear button in Pure CSS and without JavaScript

Developer
Shidhin
Size
2,202 Kb
Views
60,720
  1. HTML Textbox with a clear button in Pure CSS and without JavaScript Previews
  2. HTML Textbox with a clear button in Pure CSS and without JavaScript HTML Codes
  3. HTML Textbox with a clear button in Pure CSS and without JavaScript CSS Codes
  4. HTML Textbox with a clear button in Pure CSS and without JavaScript JS Codes

How do I make an html textbox with a clear button in pure css and without javascript?

This is an attempt to make a clearable textbox ( a textbox with a clear button , normally comes for the input type="search". ) . . What is a html textbox with a clear button in pure css and without javascript? How do you make a html textbox with a clear button in pure css and without javascript? This script and codes were developed by Shidhin on 17 July 2022, Sunday.

HTML Textbox with a clear button in Pure CSS and without JavaScript Previews
IQ Test

HTML Textbox with a clear button in Pure CSS and without JavaScript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML Textbox with a clear button in Pure CSS and without JavaScript</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>	Textbox with a clear button completely in CSS <br> <span class="redfamily">< 0 lines of JavaScript ></span>
</h1>
<div class="search-wrapper">	<form>	<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />	<button class="close-icon" type="reset"></button>	</form>
</div> <script src="js/index.js"></script>
</body>
</html>

HTML Textbox with a clear button in Pure CSS and without JavaScript - Script Codes CSS Codes

body {	background-color: #f1f1f1;	font-family: Helvetica,Arial,Verdana;
}
h1 {	color: green;	text-align: center;
}
.redfamily {	color: red;
}
.search-box,.close-icon,.search-wrapper {	position: relative;	padding: 10px;
}
.search-wrapper {	width: 500px;	margin: auto;	margin-top: 50px;
}
.search-box {	width: 80%;	border: 1px solid #ccc; outline: 0; border-radius: 15px;
}
.search-box:focus {	box-shadow: 0 0 15px 5px #b0e0ee;	border: 2px solid #bebede;
}
.close-icon {	border:1px solid transparent;	background-color: transparent;	display: inline-block;	vertical-align: middle; outline: 0; cursor: pointer;
}
.close-icon:after {	content: "X";	display: block;	width: 15px;	height: 15px;	position: absolute;	background-color: #FA9595;	z-index:1;	right: 35px;	top: 0;	bottom: 0;	margin: auto;	padding: 2px;	border-radius: 50%;	text-align: center;	color: white;	font-weight: normal;	font-size: 12px;	box-shadow: 0 0 2px #E50F0F;	cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {	display: none;
}

HTML Textbox with a clear button in Pure CSS and without JavaScript - Script Codes JS Codes

// 0 Lines of JavaScript
HTML Textbox with a clear button in Pure CSS and without JavaScript - Script Codes
HTML Textbox with a clear button in Pure CSS and without JavaScript - Script Codes
Home Page Home
Developer Shidhin
Username shidhincr
Uploaded July 17, 2022
Rating 4.5
Size 2,202 Kb
Views 60,720
Do you need developer help for HTML Textbox with a clear button in Pure CSS and without JavaScript?

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!

Shidhin (shidhincr) Script Codes
Name
Transition Spring animation - webkit
FlipJS Demo
Click FaceBook Like to Unlock the Offer
Transition Spring animation - webkit
Single DIV Love Symbol in CSS
Simple Timer Display using RiotJS
Tic Tac Toe Game in Pure JavaScript and CSS
Simple material ripple
A Pen by Shidhin
Fire using CSS animations
Create amazing marketing copy 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!