CSS可以控制HTML中的大多數(shù)元素，但有些元素卻例外，例如input、select和button等表單元素。下面我們來詳細了解一下這個問題。

form input {
background-color: #eee;
}

上述代碼CSS看似運用到了form元素下所有input標(biāo)簽的樣式改變，但實際上并不起作用。原因是表單元素是由操作系統(tǒng)紋理繪制的，而不是由瀏覽器的渲染引擎渲染的。這種通過操作系統(tǒng)實現(xiàn)的繪圖技術(shù)稱為“原生控件”。

雖然可以通過CSS修改表單元素的某些屬性，例如背景顏色和邊框半徑等，但無法完全控制輸入框和按鈕的外觀。這就是為什么大多數(shù)網(wǎng)站的登錄表單、搜索框和對話框等元素都長得很像的原因。

為了使表單元素外觀更加符合網(wǎng)頁的整體風(fēng)格，可以使用自定義元素和JavaScript。例如，可以使用CSS為元素設(shè)置特定樣式，并使用JavaScript將與對應(yīng)的表單元素關(guān)聯(lián)在一起，以實現(xiàn)更靈活的表單樣式。

// HTML
<div class="input-wrap">
<label for="input1">Input 1:</label>
<input type="text" id="input1">
</div>
// CSS
.input-wrap {
position: relative;
}
.input-wrap label {
position: absolute;
top: 0;
left: 0;
padding: 4px 8px;
background-color: #eee;
}
.input-wrap input {
padding: 4px 8px;
border: none;
background-color: transparent;
border-bottom: 1px solid #eee;
}
// JavaScript
const inputWraps = document.querySelectorAll('.input-wrap');
inputWraps.forEach(wrapper => {
const input = wrapper.querySelector('input');
const label = wrapper.querySelector('label');
input.addEventListener('focus', () => {
label.classList.add('active');
});
input.addEventListener('blur', () => {
if (!input.value) {
label.classList.remove('active');
}
})
})

總之，表單元素是無法通過CSS進行完全控制的。為了實現(xiàn)更靈活和美觀的表單樣式，可以使用自定義元素和JavaScript。