-1

Обычный вид поиска Текст При наведении на него Текст Нужно чтобы было так Текст

Мне нужно, чтобы когда человек наводил курсор на input(search), менял цвет обводки не только он, но и div'ы(vector и vector1) свой цвет

<!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>Сотрудники</title>
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet"> 
    <script src="script.js?v=1"></script>
</head>
<body>
    <div class="search" id="searchWrapper">
        <input type="search" id="search">
        <div class="vector1"></div>
        <div class="vector"></div>
    </div>
    <div class="wrapper">
        <ul class="userList">

    &lt;/ul&gt;
&lt;/div&gt;



</body>
</html>

body {
    background: #FFFFFF;
}

#search {
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 1180px;
    height: 52px;
    left: 0; 
    right: 0;
    margin-left: auto; 
    margin-right: auto; 
    top: 53px;
    background: #FFFFFF;
    border: 1px solid #E4EEF0;
    border-radius: 50px;
    padding: 20px;
    font-size: 25px;
}

#search:hover {
    border: 1px solid #B049D4;
}

div.vector1 {
    position: absolute;
    width: 17.78px;
    height: 17.8px;
    left: 1500px;
    top: 66px;
    border-radius: 15px;
    border: 3px solid #B049D4;
}

div.vector {
    position: absolute;
    width: 8.84px;
    height: 1.85px;
    left: 1520.16px;
    top: 88.8px;
    background: #B049D4;
    transform: rotate(45deg);
    border-radius: 2px;
    border: 1px solid #B049D4;
    right: 0;
}
Fernand
  • 1

1 Answers1

1

Пожалуйста, я подправил код как надо.

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: black;
}


.search {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 50px;
}


#search {
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #e4eef0;
  border-radius: 50px;
  padding: 20px;
  padding-right: 40px;
  font-size: 25px;
}


#search:hover {
  border: 1px solid #b049d4;
}


#search:hover+div.vector1 {
  border: 3px solid #282828 !important;
}


#search:hover+div.vector1+div.vector {
  border: 1px solid #282828 !important;
}


div.vector1 {
  position: absolute;
  width: 17.78px;
  height: 17.8px;
  right: 40px;
  top: 12px;
  border-radius: 15px;
  border: 3px solid #b049d4;
}


div.vector {
  position: absolute;
  width: 8.84px;
  height: 1.85px;
  right: 34px;
  top: 31px;
  background: #b049d4;
  transform: rotate(45deg);
  border-radius: 2px;
  border: 1px solid #b049d4;
}
<body class="main">
    <div class="search" id="searchWrapper">
        <input type="search" id="search">
        <div class="vector1"></div>
        <div class="vector"></div>
    </div>
    <div class="wrapper">
        <ul class="userList">
        </ul>
    </div>
</body>
Qwerty Q
  • 444