css 悬停时如何停止更改输入域和窗体效果？

sqxo8psd  于 2023-01-14  发布在  其他
关注(0)|答案(4)|浏览(121)

我已经创建了一个1像素的输入框的形式，我需要2像素的边界，而悬停，所以给予准确的css。现在的问题是，它也改变了输入框和形式的影响，当我悬停。如何停止这种影响？对不起，我的英语不好。谢谢。
先谢谢你们了。

Html代码：'

<!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;
}
}
`
css

4条答案

按热度按时间
qaxu7uf2

qaxu7uf21#

您可以使用outline来实现这一点。只需将border: 2px solid;更改为outline: 2px solid;，或者您可以使用box-shadow来维护元素的border-radius

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>
赞(0）分享  回复(0）举报  2023-01-14
mpbci0fu

mpbci0fu2#

请使用方框阴影：0 0 0 2像素RGB（64，63，63）;属性而不是边框。

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{
    box-shadow: 0 0 0 2px rgb(64, 63, 63);  
}
input[type=email]:hover{
    box-shadow: 0 0 0 2px rgb(64, 63, 63);  
}
input[type=tel]:hover{
    box-shadow: 0 0 0 2px 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;
}
}
<!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>
赞(0）分享  回复(0）举报  2023-01-14
hzbexzde

hzbexzde3#

悬停时不要更改边框宽度，而是使用轮廓属性https://developer.mozilla.org/en-US/docs/Web/CSS/outline

outline:rgb(64, 63, 63) solid 2px;
赞(0）分享  回复(0）举报  2023-01-14
ru9i0ody

ru9i0ody4#

input[type=text]:focus {

边框：3 px实心红色;}

赞(0）分享  回复(0）举报  2023-01-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com