html - css on focus 改变另一个 div 的样式
问题描述
当用户专注于输入时,我希望 svg 更改填充颜色。但我不明白如何编写 css 来实现它。添加了 Html 和 css 供您查看!我正在为 css 使用 scss。
<div class="search">
<svg width="20px" height="20px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Search" fill="#b3b3b3" fill-rule="nonzero">
<path d="M86.829,81.172 L64.128,58.471 C69.055,52.312 72,44.5 72,36 C72,16.118 55.883,0 36,0 C16.118,0 0,16.118 0,36 C0,55.882 16.118,72 36,72 C44.5,72 52.312,69.054 58.471,64.127 L81.172,86.828 C81.953,87.609 82.977,88 84,88 C85.024,88 86.048,87.609 86.829,86.828 C88.391,85.267 88.391,82.733 86.829,81.172 Z M36,64 C20.536,64 8,51.464 8,36 C8,20.536 20.536,8 36,8 C51.465,8 64,20.536 64,36 C64,51.464 51.465,64 36,64 Z" id="Shape"></path>
</g>
</g>
</svg>
<input class="input inputSearchField" type="text" placeholder="Search...">
</div>
.input{
width: 250px;
height: 35px;
padding-left: 16px;
font-weight: 700;
background-color: $white-color;
border-radius: 4px;
border: 1px solid $lighter-gray;
font-size: 16px;
outline:none;
transition: all 0.30s ease-in-out;
&::placeholder {
color: $light-gray;
}
&:focus {
box-shadow: 0 0 5px #64e469;
border: 1px solid #64e469;
}
}
.search {
position: relative;
margin: 0 auto;
text-align: center;
width: 270px;
margin-bottom: 30px;
}
.search svg {
position: absolute;
top: 7px;
right: 22px;
fill: $lighter-gray;
}
解决方案
看看这个CodePen Demo。您需要在 SVG之前移动您的输入,否则您将不得不使用一些 JavaScript 来执行此操作,因为 CSS 没有任何类型的“后视”选择器。甚至General Sibling Combinator也只会向前看当前选择器目标。
如果你先移动输入,你可以这样做:
.input:focus + svg #Icon-Search {
fill: #64e469;
}
如果您确实想保留当前结构,JavaScript 看起来像这样Demo
let search = document.getElementsByClassName('inputSearchField');
let svgFill = document.getElementById('Icon-Search');
search[0].onfocus = function(){ svgFill.style.fill = '#64e469'; }
search[0].onblur = function(){ svgFill.style.fill = '#b3b3b3'; }
你可以看到它有点乏味!
推荐阅读
- laravel - 如何将 FormRequest 用于 API JSON 请求?
- batch-file - .bat 文件夹锁定:如何在 Cmd 中更改密码
- c# - 如何在一组 WinForms 控件中管理失去焦点?
- java - 带有可选 2-4 年组件的 Java 8 日期时间解析
- c - 在c中调用write命令时传递整数代替文件描述符
- java - 寻找不寻常的模板引擎来生成海量数据
- php - PHP Sendgrid - 发件人姓名未在邮件中发送
- jquery - jQuery Marquee 滚动文本在 Bootstrap 模式中不起作用
- javascript - 当我切换到另一个jsp文件时,JSP从另一个会话中获取数据
- java - Spring Boot 管理页面客户端打开端点