样式 WooCommerce 产品搜索小部件答案

【问题标题】：Style WooCommerce Product Search Widget样式 WooCommerce 产品搜索小部件
【发布时间】：2021-03-22 05:13:45
【问题描述】：

感谢 David，我在 generatepress 论坛上为 WooCommerce 产品搜索栏获得了这个自定义 CSS 代码。

当我输入自定义 CSS 代码时，搜索栏如下所示：https://i.stack.imgur.com/8CMdx.jpg

.woocommerce-product-search {
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse
}

.woocommerce-product-search input {

    border-radius: 0 40px 40px 0;
    border-left: 0
}

.woocommerce-product-search button:before {
    content: "seach";
    font-family: "Arial";
    text-align: center;
    display: inline-block;
    font-size: 15px;
}

.woocommerce-product-search button {
    font-size: 0px;
    background-color: #fafafa;
    color: #666666;
    border: 1px solid #cccccc;
    border-right: 0;
    border-radius: 40px 0 0 40px;
}

我希望栏保持这种状态，但右侧有“搜索”按钮，如下所示：https://i.stack.imgur.com/FaOMt.jpg

拜托，你能帮我做吗？非常感谢。

---编辑 2020 年 12 月 11 日---

HTML：

<div class="woocommerce widget_product_search"><form role="search" method="get" class="woocommerce-product-search" action="https://example.com/">
    <label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
    <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products&hellip;" value="" name="s" />
    <button type="submit" value="Search">Search</button>
    <input type="hidden" name="post_type" value="product" />
</form>
</div>

【问题讨论】：

标签： css wordpress woocommerce

【解决方案1】：

不确定这是否会在没有看到 html 的情况下解决问题，但请尝试一下：

.woocommerce-product-search {
      border-radius: 40px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
}

【讨论】：

谢谢，我已经在问题的最后部分添加了html代码。