适用于导航栏的搜索框

CSS样式

.weather-search{
	display:flex;
	width:320px;
	height:32px;
	border:1px solid white;
	border-radius:30px;
	justify-content:space-between;
	align-items:center;
	position:relative;}

.weather-search input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: #000 !important;
    -webkit-box-shadow:0 0 0px 1000px transparent inset !important;
    background-color:transparent;
    background-image:none;
    transition:background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果启用时延迟的时间}

.weather-search input{
	width:270px;
	height:32px;
	border:0;
	font-size:14px;
	outline:none;
	margin:0 10px;
	background-color:transparent;}
	
.search{
	border:none;
	outline:none;
	cursor:pointer;
	background:inherit;
	min-width:16px;}
	
.search span{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	outline:none;}

HTML

<div class="weather-search">
	<input type="text" id="value" placeholder="请输入城市"/>
    <button class="search" title="搜索位置">
    	<span>
        	<svg t="1653482794231" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2340" width="16" height="16"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="2341" fill="#ffffff"></path></svg>
        </span>
    </button>
</div>

适用于页面中心的搜索框

HTML 运用了bootstrap4

<div style="display:flex;max-width:800px;height:60px;width:100%;align-items:center;border-radius:8px;background-color:#fff;">
	<button type="submit" style="background:none;border:none;font-size:16px;color:#7d8893;padding:16px;">
    	<span class="oi oi-magnifying-glass"></span>
    </button>
    <input type="text" name="q" placeholder="请输入照片名称，标签或用户名进行搜索(英文)" style="flex:auto;border:none;background:transparent;font-size:16px;outline:none;min-width:0;text-overflow:ellipsis;"  required>
</form>