Удалить черную рамку при фокусе в панели поиска CSS ⇐ CSS

[Anonymous]

У меня есть пользовательская страница новой вкладки, созданная на HTML, CSS и JS
Все хорошо, за исключением случаев, когда я нажимаю на панель поиска, чтобы ввести текст. Фокус вызывает появление границы блока в моем контейнере поиска. Я пытался удалить его с помощью CSS, но в результате появилась та же рамка. Другие мои текстовые поля не делают этого, но это текстовая область Google для поиска в Интернете.
Граница в контейнере поиска
/* 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 */
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... ch-bar-css