移动端设计中如何移除搜索按钮？display:none不生效求助

你遇到的核心问题是CSS选择器无法匹配目标元素，导致display: none规则不生效，具体原因和修复方案如下：

问题根源 #

1. 你在移动端媒体查询中写了.icon {display: none;}，但React代码里的<AiOutlineSearch />搜索图标未添加对应的styles.icon类名，CSS规则找不到目标元素，因此无法隐藏图标。
2. 若你的真实需求是隐藏按钮，当前移动端CSS里反而将按钮设为display: block，与需求完全相反。

修复方案 #

方案1：隐藏搜索图标（匹配你当前CSS的写法） #

修改React代码，给搜索图标添加类名：

import React from 'react'
import styles from './Hero.module.css'
import {AiOutlineSearch} from 'react-icons/ai'

function Hero() {
  return (
    <div className={styles.hero}>
      <form>
        <div className={styles.text}>
            <label>Where</label>
            <input type="text" placeholder='Search Location' />
        </div>
        <div className={styles.from}>
            <span className={styles.border}></span>
            <label>From</label>
            <input type="date" />
        </div>
        <div className={styles.until}>
        <span className={styles.border}></span>
            <label>Until</label>
            <input type="date" />
        </div>
        <div className={styles.search_btn}>
            {/* 给图标添加styles.icon类名 */}
            <AiOutlineSearch className={styles.icon} />
            <button className={styles.btn}>Search for cars</button>
        </div>
      </form>
    </div>
  )
}

export default Hero

方案2：隐藏搜索按钮（若你的真实需求是移除按钮） #

修改CSS Modules的媒体查询部分，将按钮的display属性改为none：

@media screen and (max-width: 720px) {
  /* 其他原有样式保持不变 */
  
  .search_btn .btn {
    /* 将display: block替换为display: none */
    display: none;
    /* 若不需要按钮样式，可删除以下冗余代码 */
    background-color: #593cfb;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    width: 100%;
    padding: 12px 18px;
    margin: .5rem 0;
    cursor: pointer;
  }

  /* 若不需要hover效果，可删除以下代码 */
  .search_btn .btn:hover {
    background-color: #4733b7;
    transition: background-color 1s;
  }

  .icon {
    display: block; /* 若需要显示图标，可保留此属性 */
  }
}

补充检查项 #

• CSS Modules会自动给类名添加唯一哈希值，必须通过styles.类名的方式引用，确保选择器能正确匹配元素。
• 可通过浏览器开发者工具查看元素的样式计算结果，检查是否有更高优先级的CSS规则覆盖了display: none。

内容的提问来源于stack exchange，提问作者sabretto