只用CSS禁用表中第一行的第一個單元格？

Question

我有一張桌子，我需要禁用第一行的第一個單元格上的輸入，只能使用CSS。 這可能嗎？

我試着content: " "但它不工作（不是:after或:before，因爲這不會禁用單元上的輸入）

小提琴：https://jsfiddle.net/79n3pr74/

Answer 1

你可以不喜歡這樣，與pointer-events：

tr:first-of-type td:first-of-type input{ 
 
    opacity:.5; 
 
    pointer-events:none; 
 
} 
 

<table> 
 
    <tr> 
 
    <td><input></td> 
 
    <td><input></td> 
 
    </tr> 
 
    </table>

這有兩個問題。其中，IE 10和更低版本將無法正常工作，輸入只會稍微透明。二，用戶仍然可以將tab放入其中。

一個更好的解決辦法是完全隱藏輸入，並與被風格看起來像一個禁用輸入:after替換：

tr:first-of-type td:first-of-type input{ 
 
    display:none; 
 
} 
 
tr:first-of-type td:first-of-type:after{ 
 
    content:""; 
 
    display:inline-block; 
 
    width:150px; 
 
    height:1em; 
 
    padding:2px; 
 
    background:white; 
 
    border:1px solid grey; 
 
    cursor:not-allowed; 
 
    vertical-align:top; 
 
    opacity:0.5; 
 
    } 
 
    

<table> 
 
    <tr> 
 
    <td><input></td> 
 
    <td><input></td> 
 
    </tr> 
 
</table>

You can play with this jsfiddle。