仅使用CSS禁用表中第一行的第一个单元格？

Question

我有一个表，我需要仅使用CSS禁用第一行的第一个单元格上的输入。 这可能吗？

我已尝试使用content: " "，但它无效（不是:after或:before，因为这不会禁用单元格上的输入）

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

Answer 1

你可以这样做，pointer-events：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这有两个问题。一，IE 10和更少的工作，输入将略微透明。二，用户仍然可以tab进入它。

更好的解决方案是完全隐藏输入，并将其替换为样式为禁用输入的:after：

＆＃13;

＆＃13;

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;
  }
      

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

You can play with this jsfiddle