CSS控制只讀不寫(xiě)指的是在HTML表單中，某些輸入框的內(nèi)容只能被讀取而不能被輸入或編輯。CSS提供了實(shí)現(xiàn)這種只讀不寫(xiě)功能的屬性，即readonly。

<input type="text" readonly="true" value="只讀輸入框">

在該輸入框中，readonly屬性被設(shè)置為true，這意味著用戶無(wú)法編輯該輸入框中的內(nèi)容，只能查看其內(nèi)容。該輸入框的值為“只讀輸入框”。在該輸入框中，無(wú)論用戶如何嘗試修改或刪除其內(nèi)容，都不會(huì)生效。

除了使用readonly屬性，也可以使用CSS中的偽元素::before、::after來(lái)實(shí)現(xiàn)只讀不寫(xiě)的效果。例如：

<div>
<p><span>只讀</span></p>
</div>div {
position: relative;
}
span::before {
content: attr(title);
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
span {
position: relative;
}
span::before {
opacity: 1;
z-index: 2;
}
span:hover::before {
opacity: 0;
}

在上面的代碼中，我們?cè)贖TML中創(chuàng)建了一個(gè)包含一段只讀文本的<p>元素，并用<span>元素將文本包裹起來(lái)。在CSS中，我們?yōu)?code><span>元素的偽元素::before設(shè)置了內(nèi)容為attr(title)。這意味著<span>元素的title屬性值將作為該偽元素的內(nèi)容。為了使偽元素的內(nèi)容被放置到<span>元素之下，我們還為偽元素設(shè)置了一個(gè)負(fù)的z-index屬性。

接下來(lái)，我們對(duì)<span>元素設(shè)置了一個(gè)相對(duì)定位（這是為了實(shí)現(xiàn)<span>元素內(nèi)的偽元素定位），并將偽元素的z-index屬性設(shè)置為2，使其被放置到<span>元素上方。最后，我們?yōu)槭髽?biāo)懸停在<span>元素上時(shí)的狀態(tài)設(shè)置了一個(gè)過(guò)渡，使偽元素的透明度從1（完全不透明）變?yōu)?（完全透明），以使其看起來(lái)消失。

這就是使用CSS實(shí)現(xiàn)只讀不寫(xiě)的基本方法。