I have create a form with 1 px input fields border, I need 2 px border while hovering so give exact by css. Now the problem is it also changing the effects of input fields and form when I hovering. How to stop this effect? Sorry for my bad English. Thank you.
Thank you in advance guys.
Html code: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<div class="form">
<div class="para">
</div>
<form action="#">
<div class="row">
<label>Name</label>
</div>
<div class="row">
<div class="column-left">
<input type="text" class="form-control" id="name" placeholder="Name" required ><span class="danger">*</span>
</div>
<div class="column-right">
<input type="text" class="form-control" id="surname" placeholder="Surname" required><span class="danger-surname">*</span>
</div>
</div>
<div class="row">
<label>Address</label>
</div>
<div class="row">
<input type="text" id="name" placeholder="Address Line 1" required><span class="danger-address">*</span>
</div>
<div class="row">
<input type="text" id="name" placeholder="Address Line 2">
</div>
<div class="row">
<div class="column-add">
<input type="text" id="name" placeholder="City" required><span class="danger-city">*</span>
</div>
<div class="column-middle-add">
<input type="text" id="name" placeholder="Region / State" required><span class="danger-region">*</span>
</div>
<div class="column-right-add">
<input type="text" id="name" placeholder="Post Code / Zip">
</div>
</div>
<div class="row">
<label>Contact</label>
</div>
<div class="row">
<div class="column-left">
<input name="email" type="email" id="email" placeholder="Email" required><span class="danger-email">*</span>
</div>
<div class="column-right">
<input type="tel" id="tel" placeholder="Phone No (incl. country code)" required><span class="danger-phone">*</span>
</div>
</div>
<div class="signup">
<input type="checkbox" name="signup" id="signup" alt="Sign" placeholder="signup"> <label> Sign</label>
</div>
<div class="row">
<div class="column-left">
<label>Product</label>
</div>
<div class="column-right">
<label>Date of Purchase</label>
</div>
</div>
<div class="row">
<div class="column-left"><p id="Hello" style="color: red; margin-right: 120px; position: absolute; margin-left: 162px;font-size: large;"></p>
<select aria-lebel="products" name="Select-Product" id="products" form="register-form" required>
<option value="" disabled selected hidden>Select Your Product</option>
<option value="Product 1">Product 1</option>
<option value="Product 2">Product 2</option>
<option value="Product 3">Product 3</option>
<option value="Product 4">Product 4</option>
</select>
</div>
<div class="column-right">
<label for="purchase-date"></label>
<input type="date" id="purchase-date" placeholder="" name="purchase-date" value="2018-07-22" required>
</div>
</div>
<div class="row">
<label>Place of Purchase</label>
</div>
<div class="row">
<div class="column-left">
<select id="Place-of-Purchase" name="Place of Purchase" form="register-form">
<option value="Place of Purchase" disabled selected hidden>hey</option>
<option value="Option 1">Option 1</option>
<option value=""></option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
</div>
</div>
<div class="btn">
<input type="submit" style="align-items: center;" value="Submit">
</div>
</form>
<div class="policy-text">
<p>For more about how we use your information, please see our Privacy Policy.</p>
</div>
</div>
</div>
<!-- asterisk for select-products -->
<script>
document.getElementById("Hello").innerHTML = "*";
let element = document.getElementById(title);
alert(element.href);
</script>
</body>
</html>
`
CSS: `
body{
color: rgb(131 131 131 / 76%);
font-family: HelveticaNeue, sans-serif;
position: relative;
}
html {
height: 100%;
}
.form-container{
align-items: center;
margin: 10px auto 0px;
display: flex;
box-sizing: border-box;
width: 800px;
}
.form{
margin: auto;
padding: 20px;
}
body .form-container .form .para{
margin-top: 10px;
margin-bottom: 35px;
padding: 0px;
}
.row {
display: flex;
justify-content: space-between;
margin-top: 5px;
margin-bottom: 5px;
}
.column-left {
width: 50%;
display: flex;
float: left;
}
.column-right {
width: 50%;
display: flex;
float: right;
}
.column-add {
width: 33%;
display: flex;
float: left;
padding:auto;
}
.column-right-add {
width: 33%;
display: flex;
float: right;
}
.column-middle-add {
width: 33%;
display: flex;
justify-content: center;
}
input[type=text], textarea, select {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
font-size: medium;
font-weight: 300;
}
input[type=text]:hover{
border: 2px solid rgb(64, 63, 63);
}
input[type=email]:hover{
border: 2px solid rgb(64, 63, 63);
}
input[type=tel]:hover{
border: 2px solid rgb(64, 63, 63);
}
input[type=email], textarea, select {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
font-size: medium;
font-weight: 300;
}
input[type=tel], textarea, select {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
font-size: medium;
}
input[type="date" i], textarea {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
color: #6c6565;
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
}
select#Date-of-Purchase {
color: rgba(84, 82, 82, 0.798);
}
select#Place-of-Purchase {
color: rgba(84, 82, 82, 0.798);
}
.signup{
margin-top: 10px;
margin-bottom:10px;
vertical-align: middle;
display: inline-block;
}
.signup label{
font-weight: 300;
}
input#signup {
vertical-align: middle;
width: 25px;
height: 25px;
}
input[type=text]:focus {
border-color:rgb(69, 69, 69);
}
input[type=submit] {
padding:10px 65px;
background:rgba(107, 103, 101, 0.831);
border:0 none;
cursor:pointer;
border-radius: 30px;
color: white;
margin-top: 35px;
}
p {
font-family: system-ui;
color: #6c6565;
}
.btn{
align-items: center;
display:flex;
justify-content: center;
}
label {
font-weight:600;
color: rgba(84, 82, 82, 0.798);
vertical-align: middle;
}
select {
appearance: none;
background: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23212121'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
border-radius: 2px;
color: #6c6565;
}
.policy-text{
margin-top: 60px;
margin-bottom: 120px;;
}
.danger{
color: red;
position: absolute;
margin-left: 62px;
margin-top: 15px;
font-size: large;
opacity: 1;
pointer-events: none;
}
input:focus + .danger {
display: none;
}
input:focus + .danger-surname {
display: none;
}
input:focus + .danger-address {
display: none;
}
input:focus + .danger-city {
display: none;
}
input:focus + .danger-email {
display: none;
}
input:focus + .danger-phone {
display: none;
}
input:focus + .danger-region {
display: none;
}
.danger .danger-surname .danger-address .danger-city .danger-email .danger-phone .danger-region :after{
display: none!important;
opacity: 0;
}
input::selection + #Hello{
display: none;
}
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
.danger-surname{
color: red;
position: absolute;
margin-left: 82px;
margin-top: 15px;
font-size: large;
}
.danger-address{
color: red;
position: absolute;
margin-left: 128px;
margin-top: 15px;
font-size: large;
}
.danger-city{
color: red;
position: absolute;
margin-left: 48px;
margin-top: 15px;
font-size: large;
}
.danger-region{
color: red;
position: absolute;
margin-left: 18px;
margin-top: 15px;
font-size: large;
}
.danger-email{
color: red;
position: absolute;
margin-left: 60px;
margin-top: 15px;
font-size: large;
}
.danger-phone{
color: red;
position: absolute;
margin-left: 230px;
margin-top: 15px;
font-size: large;
}
::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */
/* media queries */
@media only screen and (max-width: 600px) {
.column-left, .column-right,.column-add,.column-middle-add, .column-right-add,.row {
width: 100%;
flex-direction: column;
display: flex;
}
.danger-region{
margin-left: 125px;
margin-top: -25px;
}
}
`
You can use outline for that. Simple change border: 2px solid; into outline: 2px solid; or you can use box-shadow to maintain the border-radius of element
body{
color: rgb(131 131 131 / 76%);
font-family: HelveticaNeue, sans-serif;
position: relative;
}
html {
height: 100%;
}
.form-container{
align-items: center;
margin: 10px auto 0px;
display: flex;
box-sizing: border-box;
width: 800px;
}
.form{
margin: auto;
padding: 20px;
}
body .form-container .form .para{
margin-top: 10px;
margin-bottom: 35px;
padding: 0px;
}
.row {
display: flex;
justify-content: space-between;
margin-top: 5px;
margin-bottom: 5px;
}
.column-left {
width: 50%;
display: flex;
float: left;
}
.column-right {
width: 50%;
display: flex;
float: right;
}
.column-add {
width: 33%;
display: flex;
float: left;
padding:auto;
}
.column-right-add {
width: 33%;
display: flex;
float: right;
}
.column-middle-add {
width: 33%;
display: flex;
justify-content: center;
}
input[type=text], textarea, select {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
font-size: medium;
font-weight: 300;
}
input[type=text]:hover{
outline: 2px solid black;
}
input[type=email]:hover{
outline: 2px solid black;
}
input[type=tel]:hover{
outline: 2px solid black;
}
input[type=email], textarea, select {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
font-size: medium;
font-weight: 300;
}
input[type=tel], textarea, select {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
font-size: medium;
}
input[type="date" i], textarea {
padding: 0.8rem;
border: 1px solid rgb(133, 133, 133);
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
margin-right: 15px;
width:100%;
color: #6c6565;
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
}
select#Date-of-Purchase {
color: rgba(84, 82, 82, 0.798);
}
select#Place-of-Purchase {
color: rgba(84, 82, 82, 0.798);
}
.signup{
margin-top: 10px;
margin-bottom:10px;
vertical-align: middle;
display: inline-block;
}
.signup label{
font-weight: 300;
}
input#signup {
vertical-align: middle;
width: 25px;
height: 25px;
}
input[type=text]:focus {
border-color:rgb(69, 69, 69);
}
input[type=submit] {
padding:10px 65px;
background:rgba(107, 103, 101, 0.831);
border:0 none;
cursor:pointer;
border-radius: 30px;
color: white;
margin-top: 35px;
}
p {
font-family: system-ui;
color: #6c6565;
}
.btn{
align-items: center;
display:flex;
justify-content: center;
}
label {
font-weight:600;
color: rgba(84, 82, 82, 0.798);
vertical-align: middle;
}
select {
appearance: none;
background: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23212121'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
border-radius: 2px;
color: #6c6565;
}
.policy-text{
margin-top: 60px;
margin-bottom: 120px;;
}
.danger{
color: red;
position: absolute;
margin-left: 62px;
margin-top: 15px;
font-size: large;
opacity: 1;
pointer-events: none;
}
input:focus + .danger {
display: none;
}
input:focus + .danger-surname {
display: none;
}
input:focus + .danger-address {
display: none;
}
input:focus + .danger-city {
display: none;
}
input:focus + .danger-email {
display: none;
}
input:focus + .danger-phone {
display: none;
}
input:focus + .danger-region {
display: none;
}
.danger .danger-surname .danger-address .danger-city .danger-email .danger-phone .danger-region :after{
display: none!important;
opacity: 0;
}
input::selection + #Hello{
display: none;
}
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
.danger-surname{
color: red;
position: absolute;
margin-left: 82px;
margin-top: 15px;
font-size: large;
}
.danger-address{
color: red;
position: absolute;
margin-left: 128px;
margin-top: 15px;
font-size: large;
}
.danger-city{
color: red;
position: absolute;
margin-left: 48px;
margin-top: 15px;
font-size: large;
}
.danger-region{
color: red;
position: absolute;
margin-left: 18px;
margin-top: 15px;
font-size: large;
}
.danger-email{
color: red;
position: absolute;
margin-left: 60px;
margin-top: 15px;
font-size: large;
}
.danger-phone{
color: red;
position: absolute;
margin-left: 230px;
margin-top: 15px;
font-size: large;
}
::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */
/* media queries */
@media only screen and (max-width: 600px) {
.column-left, .column-right,.column-add,.column-middle-add, .column-right-add,.row {
width: 100%;
flex-direction: column;
display: flex;
}
.danger-region{
margin-left: 125px;
margin-top: -25px;
}
} <form action="#">
<div class="row">
<label>Name</label>
</div>
<div class="row">
<div class="column-left">
<input type="text" class="form-control" id="name" placeholder="Name" required ><span class="danger">*</span>
</div>
<div class="column-right">
<input type="text" class="form-control" id="surname" placeholder="Surname" required><span class="danger-surname">*</span>
</div>
</div>
<div class="row">
<label>Address</label>
</div>
<div class="row">
<input type="text" id="name" placeholder="Address Line 1" required><span class="danger-address">*</span>
</div>
<div class="row">
<input type="text" id="name" placeholder="Address Line 2">
</div>
<div class="row">
<div class="column-add">
<input type="text" id="name" placeholder="City" required><span class="danger-city">*</span>
</div>
<div class="column-middle-add">
<input type="text" id="name" placeholder="Region / State" required><span class="danger-region">*</span>
</div>
<div class="column-right-add">
<input type="text" id="name" placeholder="Post Code / Zip">
</div>
</div>
<div class="row">
<label>Contact</label>
</div>
<div class="row">
<div class="column-left">
<input name="email" type="email" id="email" placeholder="Email" required><span class="danger-email">*</span>
</div>
<div class="column-right">
<input type="tel" id="tel" placeholder="Phone No (incl. country code)" required><span class="danger-phone">*</span>
</div>
</div>
<div class="signup">
<input type="checkbox" name="signup" id="signup" alt="Sign" placeholder="signup"> <label> Sign</label>
</div>
<div class="row">
<div class="column-left">
<label>Product</label>
</div>
<div class="column-right">
<label>Date of Purchase</label>
</div>
</div>
<div class="row">
<div class="column-left"><p id="Hello" style="color: red; margin-right: 120px; position: absolute; margin-left: 162px;font-size: large;"></p>
<select aria-lebel="products" name="Select-Product" id="products" form="register-form" required>
<option value="" disabled selected hidden>Select Your Product</option>
<option value="Product 1">Product 1</option>
<option value="Product 2">Product 2</option>
<option value="Product 3">Product 3</option>
<option value="Product 4">Product 4</option>
</select>
</div>
<div class="column-right">
<label for="purchase-date"></label>
<input type="date" id="purchase-date" placeholder="" name="purchase-date" value="2018-07-22" required>
</div>
</div>
<div class="row">
<label>Place of Purchase</label>
</div>
<div class="row">
<div class="column-left">
<select id="Place-of-Purchase" name="Place of Purchase" form="register-form">
<option value="Place of Purchase" disabled selected hidden>hey</option>
<option value="Option 1">Option 1</option>
<option value=""></option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
</div>
</div>
<div class="btn">
<input type="submit" style="align-items: center;" value="Submit">
</div>
</form>