當我們單擊輸入使用引導程式 4 制作的搜索欄的某些內容時，我想洗掉邊框或輪廓。在此處輸入影像描述
.search-icon{
border-radius: 0;
background: transparent;
color: black;
}
.search-icon:hover{
border-radius: 0;
background: transparent;
color: var(--main-bg-color);
resize: none;
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Blog</title>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-lite bg-dark text-dark">
<div class="container text-dark" style="color:black;">
<a class="navbar-brand font3 m-right" href="#">NicoDrip</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link font1" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link font1" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link font1" href="#">Download</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control searchbar me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success search-icon" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
<hr>
<div>我使用這段 html 和 css 代碼來覆寫引導程式，但它只洗掉簡單的邊框我想在單擊搜索欄位后洗掉邊框/輪廓，如果你知道該怎么做，請幫助我
uj5u.com熱心網友回復：
.form-controli {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-controli:focus{
outline: none;
}
<form class="d-flex">
<input class="form-controli searchbar me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success search-icon" type="submit"><i class="fa fa-search"></i></button>
</form>
在樣式標簽中添加 (.form-controli) 類也將表單 div 中的 (.form-control) 替換為 (.form-controli)。
uj5u.com熱心網友回復：
.no-border {
outline: none;
-webkit-appearance: none;
box-shadow: none !important;
}
將此類添加no-border到您的輸入欄位。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514526.html
標籤：htmlcss引导程序 4