主页 / 问题 / 1234373
Accepted
midnightelf18
Asked:2022-01-21 22:44:42 +0000 UTC2022-01-21 22:44:42 +0000 UTC

当：焦点位于其中的输入时如何更改表单的css

  • 772

有这个表格：

.header-search {
  padding: 16px;
  background-color: #ff000080;
}
.header-icon.header-search__icon {
  width: 20px;
  height: 20px;
}

.header-search__input {
  border: none;
  /* outline: none; */
  font-size: 1.2em;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.header-search__input::placeholder {
  color: #BDBDBD;
  font-family: 'Raleway', 'Montserrat', sans-serif;
}

.header-search {
  width: 160px;
  display: flex;
  align-items: center;
}
<form action="search" class="header-search">
  <input type="text" class="header-search__input" placeholder="Поиск">
  <img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>

焦点打开时如何使.header-search__input背景颜色.header-search变为蓝色。

upd：最好带有动画
upd：我希望它纯粹在 css 中。但如果它是关键的 js 也是可能的

javascript

2 个回答

  1. 如果您不需要旧版浏览器，则可以使用:focus-within伪类。已经在所有现代浏览器中支持。但是有一个细微差别 - 您无法指定表单内的确切内容应该是焦点，它会对焦点中的任何内容做出反应。

    .header-search {
  padding: 16px;
  background-color: #ff000080;
  transition: background-color 0.5s linear;
}

.header-search:focus-within {
  background-color: #0000ff;
}

.header-icon.header-search__icon {
  width: 20px;
  height: 20px;
}

.header-search__input {
  border: none;
  /* outline: none; */
  font-size: 1.2em;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.header-search__input::placeholder {
  color: #BDBDBD;
  font-family: 'Raleway', 'Montserrat', sans-serif;
}

.header-search {
  width: 160px;
  display: flex;
  align-items: center;
}
    <form action="search" class="header-search">
  <input type="text" class="header-search__input" placeholder="Поиск">
  <img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>

    • 1
  2. Best Answer

    这不能在CSS中完成，因为它指定了从祖先到子代的顺序，反之则不然

    document.querySelector('.header-search__input').addEventListener('focus', function(e){
    document.querySelector('.header-search').classList.toggle("mystyle");
}, true);

document.querySelector('.header-search__input').addEventListener('blur', function(e){
    document.querySelector('.header-search').classList.toggle("mystyle");
}, true);
    .header-search {
  padding: 16px;
  background-color: #ff000080;
  
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}
.header-icon.header-search__icon {
  width: 20px;
  height: 20px;
}

.header-search__input {
  border: none;
  /* outline: none; */
  font-size: 1.2em;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.header-search__input::placeholder {
  color: #BDBDBD;
  font-family: 'Raleway', 'Montserrat', sans-serif;
}

.header-search {
  width: 160px;
  display: flex;
  align-items: center;
}

.mystyle {
   background-color: blue;      
}
    <form action="search" class="header-search">
  <input type="text" class="header-search__input" placeholder="Поиск">
  <img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>

    • 0

相关问题