请求调整WooCommerce搜索栏：左对齐、缩尺寸并加指定边框

替换你现有CSS代码为以下内容，可实现左对齐、缩小尺寸、添加指定颜色边框的需求：

/* 搜索栏核心布局与样式 */
.woocommerce-product-search {
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    /* 左对齐 */
    justify-content: flex-start;
    /* 缩小到原尺寸1/4，可根据页面微调宽度 */
    width: 250px;
    /* 添加#03c5b3颜色边框 */
    border: 1px solid #03c5b3;
    /* 清除错误的绝对定位 */
    position: static;
}

/* 搜索输入框样式优化 */
.woocommerce-product-search input {
    flex: 1;
    border-radius: 0 40px 40px 0;
    border-left: 0;
    border: none;
    padding: 10px 15px;
    outline: none;
}

/* 搜索按钮样式调整 */
.woocommerce-product-search button {
    font-size: 0;
    background-color: #fafafa;
    color: #666666;
    border: none;
    /* 按钮与输入框间的分割线，和外层边框同色 */
    border-right: 1px solid #03c5b3;
    border-radius: 40px 0 0 40px;
    padding: 10px 15px;
    cursor: pointer;
}

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

关键调整说明： #

• 移除了原代码中错误的.left类和position: absolute设置（之前right:0会强制右对齐，与需求相悖），改用justify-content: flex-start实现左对齐
• 通过width: 250px控制搜索栏宽度（可根据页面实际布局微调数值），确保尺寸缩至原大小的1/4并在“关于我们”板块上方结束
• 将边框统一设置在搜索栏外层容器，同时清除输入框和按钮的原有边框，避免边框重叠变粗；按钮右侧保留同色分割线，保证视觉连贯性
• 修正了原代码中content: "seach"的拼写错误
• 添加内边距和outline: none，优化输入时的视觉体验

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