【发布时间】：2025-12-31 07:40:12
【问题描述】：
我是一个新手程序员，所以请原谅我问了一个可能很愚蠢的问题。出于某种原因，我能够对搜索按钮的边缘进行圆角处理，但无法成功地对搜索栏的边缘进行圆角处理。
click here to see image of navbar im working with
Navbar.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”一样简单，因为这是控制搜索的类酒吧。但这并没有改变任何东西。
还有... 如果您还可以将右侧按钮周围的边框移除，使其看起来像搜索按钮，则可以加分。
【问题讨论】：