如何移除Mac端Bootstrap搜索图标后的白色背景块

在基于Bootstrap开发的项目中，Mac端搜索图标后方会显示白色背景块，但Windows端无此问题，需要移除该背景块以实现无背景的搜索图标效果。

原代码 #

HTML代码

<div class="search-container">
  <form action="/search" method="get">
    <input class="search expandright" id="searchright" type="search" name="q" placeholder="Search">
    <label type="button" class="ms-3 bg-white searchbutton border border-0 bg-none" for="searchright"><i class="fa-solid fa-magnifying-glass mt-1"></i></label>
  </form>
</div>

CSS代码

@media screen 
          and (min-device-width: 100px) 
      and (max-device-width: 1400px) 
     and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) {
           .expandright {
        left: 49px;
           right: auto; /* Button width-1px */
      }

        .expandright:focus {
             padding: 0 0 0 16px;
          border: 2px solid #006400;
             border-radius:  10px;
            }
         .search-container {
             position: relative;
          display: inline-block;
           margin: 4px 2px;
            height: 50px;
             width: 50px;
          vertical-align: bottom;
           }

         .searchbutton {
             position: absolute;
                font-size: 22px;
            width: 100%;
           margin: 0;
             padding: 0;
              }

          .search:focus + .searchbutton {
            transition-duration: 0.4s;
              -moz-transition-duration: 0.4s;
                -webkit-transition-duration: 0.4s;
           -o-transition-duration: 0.4s;
             background-color: none;
              color: none;
            }

         .search {
               position: absolute;
              left: 49px;
                background-color: white;
             outline: none;
               border: none;
               padding: 0;
             width: 0;
               height: 100%;
              z-index: 10;
               transition-duration: 0.4s;
            -moz-transition-duration: 0.4s;
           -webkit-transition-duration: 0.4s;
           -o-transition-duration: 0.4s;
       }
      }

解决方法 #

• 移除HTML中的bg-white类：这个Bootstrap类会强制给label添加白色背景，在Mac的WebKit环境下优先级较高，直接删除即可。
• 修正CSS的背景值错误：background-color: none是无效写法，替换为background-color: transparent来设置透明背景。
• 给.searchbutton明确设置透明背景：添加background: transparent覆盖浏览器默认或继承的背景样式，确保图标区域无背景。
• 针对WebKit内核优化：添加-webkit-appearance: none避免Mac端浏览器的默认控件样式干扰。

修改后的代码 #

HTML代码

<div class="search-container">
  <form action="/search" method="get">
    <input class="search expandright" id="searchright" type="search" name="q" placeholder="Search">
    <label type="button" class="ms-3 searchbutton border border-0 bg-none" for="searchright"><i class="fa-solid fa-magnifying-glass mt-1"></i></label>
  </form>
</div>

CSS代码

@media screen 
          and (min-device-width: 100px) 
      and (max-device-width: 1400px) 
     and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) {
           .expandright {
        left: 49px;
           right: auto; /* Button width-1px */
      }

        .expandright:focus {
             padding: 0 0 0 16px;
          border: 2px solid #006400;
             border-radius:  10px;
            }
         .search-container {
             position: relative;
          display: inline-block;
           margin: 4px 2px;
            height: 50px;
             width: 50px;
          vertical-align: bottom;
           }

         .searchbutton {
             position: absolute;
                font-size: 22px;
            width: 100%;
           margin: 0;
             padding: 0;
             background: transparent;
             -webkit-appearance: none; /* 避免WebKit默认样式 */
              }

          .search:focus + .searchbutton {
            transition-duration: 0.4s;
              -moz-transition-duration: 0.4s;
                -webkit-transition-duration: 0.4s;
           -o-transition-duration: 0.4s;
             background-color: transparent;
              color: inherit; /* 替换无效的color: none */
            }

         .search {
               position: absolute;
              left: 49px;
                background-color: white;
             outline: none;
               border: none;
               padding: 0;
             width: 0;
               height: 100%;
              z-index: 10;
               transition-duration: 0.4s;
            -moz-transition-duration: 0.4s;
           -webkit-transition-duration: 0.4s;
           -o-transition-duration: 0.4s;
       }
      }

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