删除搜索栏CSS焦点上的黑色边框

Question

我有一个用 HTML、CSS 和 JS 内置的自定义新标签页 一切都很好，除了当我单击搜索栏进行输入时。焦点会触发块边框出现在我的搜索容器中。我尝试通过 CSS 删除它，但它会导致出现相同的边框。我的其他文本输入不会执行此操作，但这个恰好是用于搜索网络的谷歌文本区域。

搜索容器中的边框

/* Search Container */
.search-container {
    background: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Blur effect for the background */
    border-radius: 15px; /* Rounded corners */
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle white border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin-top: 20px; /* Spacing from the top or other elements */
    width: 500px; /* Fixed width, adjust as necessary */
    position: relative; /* Needed for absolute positioning of inner elements */
    display: flex;
    justify-content: space-between; /* Distributes children evenly */
    align-items: center;
}

/* Search Input Field */
.search-container input[type="text"] {
    width: 80%;
    height: 40px;
    border: 1px solid transparent; /* Ensures no visible border */
    background: transparent;
    padding-left: 15px;
    font-size: 16px;
    color: #000;
    outline: none; /* Removes the focus outline */
}

.search-container input[type="text"]:focus {
    outline: none; /* Ensures no focus outline */
    border-color: transparent; /* Keeps the border transparent on focus */
}

Answer 1

1. 右键单击输入，然后单击“检查”，然后转到“元素”选项卡中的输入。
2. 点击：hov
3. 一定要检查一些状态（可能有组合）

元素状态图像