Hover input

Developer
Maharajan
Size
2,148 Kb
Views
4,048
  1. Hover input Previews
  2. Hover input HTML Codes
  3. Hover input CSS Codes

How do I make an hover input?

Background change for the radio button while hover. What is a hover input? How do you make a hover input? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

Hover input Previews
IQ Test

Hover input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover input</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title">Hover radio button</h1>
<h3>normal radio button</h3>
<input type="radio" name="radio1" />option1<input type="radio" name="radio1" />option2<br>
<br>
<div class="color_change"> <h3> label color get change</h3> <input type="radio" name="radiohover" id="radio" /> <label for="radio">option1 <span></span> </label> <input type="radio" name="radiohover" id="radio1" /> <label for="radio1">option2 <span></span> </label>
</div>
<br>
<div class="color_changebc"> <h3> label background get change</h3> <input type="radio" name="radiobc" id="radiobc" /> <label for="radiobc">option1 <span></span> </label> <input type="radio" name="radiobc" id="radiobc1" /> <label for="radiobc1">option2 <span></span> </label>
</div>
<br>
<div class="color_changehspan"> <h3> label color and background get change</h3> <input type="radio" name="radiospan" id="radiospan" /> <label for="radiospan">option1 <span></span> </label> <br> <input type="radio" name="radiospan" id="radiospan1" /> <label for="radiospan1">option2 <span></span> </label>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
</body>
</html>

Hover input - Script Codes CSS Codes

body { background: #EDEDF1;
}
h1.title { font-size: 30px;
}
h3
{ text-transform:capitalize; font-family:sans-serif; text-shadow:0px 0px 3px #000;
}
input
{ cursor:pointer;
}
#radio,
#radio1,
.color_changebc input[type='radio'],
.color_changehspan input[type='radio'] { display: none;
}
label { cursor: pointer; display: inline-block;
}
.color_change input[type='radio']:checked + label { color: red;
}
.color_changebc label,
.color_changehspan label { padding: 5px 10px; position: relative;
}
.color_changebc input[type='radio']:checked + label { color: #fff; padding: 5px 10px; border-radius: 5px; background: rgba(0, 0, 0, .5)
}
.color_changehspan > label span { width: 0px; display: inline-block; position: absolute; top: 0; left: 0; height: 100%; -webkit-transition: all 1s; border-radius: 5px;
}
.color_changehspan > input[type='radio'] + label:hover span { width: 100%; background: rgba(0, 0, 0, .2)
}
.color_changehspan input[type='radio']:checked + label,.color_changehspan > input[type='radio'] + label:hover
{ color:green;
}
.color_changehspan input[type='radio']:checked + label span { width: 100%; background-color: rgba(0, 0, 0, .2); color: #fff; box-shadow: 1px 1px 10px #fff;
}
.color_changehspan > label:hover span { background: rgba(0, 0, 0, .5); width: 100%;
}
Hover input - Script Codes
Hover input - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 2,148 Kb
Views 4,048
Do you need developer help for Hover input?

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!

Maharajan (mhrjnsa1) Script Codes
Name
Drop down options disable
Change background while click and hover
Text appearance
Border hover effect
Parallax slider
A Pen by maharajan
Parallax scrolling
Memory game
Pure css loader
Boom
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!