时间戳

首页 > 解决方案 > 我应该怎么做才能使搜索框的边缘变圆？

css - 我应该怎么做才能使搜索框的边缘变圆？

问题描述

我是一个新手程序员，所以请原谅我问什么可能是一个愚蠢的问题。出于某种原因，我能够对搜索按钮的边缘进行圆角处理，但无法成功地对搜索栏的边缘进行圆角处理。

单击此处查看我正在使用的导航栏的图像

导航栏.jsx

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as ReactBootStrap from 'react-bootstrap';
import { CgSearch } from 'react-icons/cg';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';

function Navbar() {
  return (

    <section className="search-bar">
      <div className="row">
        <div className="col-lg mx-auto"> 

          <form>
            <div>
              <div className="input-group">
                <div className="homeBtn">
                <h3>VIZZEY</h3> 
                </div> 
              
                <input type="search" placeholder="Search" className="form-control" />
                <button className="searchBtn"><CgSearch /></button>
                <div className="input-group-append buttons">
                
                  
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><FiMail /></h4>
                    </button>
                  </div>
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><FaPlus /></h4>
                    </button>
                  </div>
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><AiTwotoneBell /></h4>
                    </button>
                  </div>
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><BsFillPersonFill /></h4>
                    </button>
                  </div>
                
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>
  )
}
export default Navbar;

导航栏.css

.searchBtn {
    color: #fff;
    background-color: #00ff9d;
    height: 38px; 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; 
    width: 40px;   
    border: black; 
}    

form {
    padding-top: 10px;
}

.icon {
    /* border-radius: 20px;  */
    padding-right: 20px;
} 

.form-control {
border-top-left-radius: 10px;
background-color: rgb(196, 196, 196); 
border-color: rgb(133, 133, 133);  

} 

.form-control:focus-within {
    background-color: rgb(196, 196, 196); 
    border-color: rgb(133, 133, 133); 
    outline: none;  
 
}

.search-bar {
    width: auto; 
    border: solid  #1c1f29; 
    background-color: #1c1f29; 
    padding-bottom: 10px;
}

.icon-btn {
    height: 40px; 
    width: 40px; 
    border-radius: 5px; 
    background-color: #00ff9d;
    color: white; 
    outline-color: chocolate;
}

.homeBtn {
    padding-right: 60px; 
    padding-left: 50px; 
    color: #00ff9d;  
 
} 

.buttons {
    padding-left: 55px; 
    padding-right: 15px;
}

任何人都可以玩弄它并使左侧的生活成为右侧吗？我认为这就像在 CSS 中将“border-top-left-radius:5px”和“border-bottom-left-radius:5px”添加到“.form-control”一样简单，因为这是控制搜索的类酒吧。但这并没有改变任何东西。

另外...如果您还可以删除右侧按钮周围的边框以看起来像搜索按钮，则可以加分。

标签： cssreactjs

解决方案

这是修改后的 Stackblitz的复制品。

border: none;我只是通过添加类来删除边框icon-btn。对于输入，您必须使您的属性变得重要，如下所示：

.my-input {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

推荐阅读