html - 使用 CSS 使选项变灰

Question

我有下面的代码。目前它隐藏了输入框，我想显示它们但将它们变灰并禁用，有什么想法吗？

<style label="hideElements" name="question.element">
  <![CDATA[
    \@if this.groups
      \@if col.group and row.group
        <td headers="${ec.this.label + "_" + ec.col.label if ec.col.label else ""} $(this.label)_$(col.group.label) $(this.label)_$(row.group.label)" class="element $(extraClasses) $(col.group.styles.ss.groupClassNames) $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) survey-q-grid-cell"  $(extra)>
        </td>
      \@else
        \@if col.group
          <td headers="${ec.this.label + "_" + ec.col.label if ec.col.label else ""} $(this.label)_$(col.group.label)" class="element $(extraClasses) $(col.group.styles.ss.groupClassNames) $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) survey-q-grid-cell"  $(extra)>
          </td>
        \@else
          \@if row.group
            <td headers="${ec.this.label + "_" + ec.col.label if ec.col.label else ""} $(this.label)_$(row.group.label)" class="element $(extraClasses) $(row.group.styles.ss.groupClassNames) $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) survey-q-grid-cell"  $(extra)>
            </td>
          \@else
            <td headers="${ec.this.label + "_" + ec.col.label if ec.col.label else ""}" class="element $(extraClasses) $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) survey-q-grid-cell"  $(extra)>
            </td>
          \@endif
        \@endif
      \@endif
    \@else
      <td headers="${ec.this.label + "_" + ec.col.label if ec.col.label else ""}" class="element $(extraClasses) $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) survey-q-grid-cell"  $(extra)>
      </td>
    \@endif
  ]]>
  </style>

<style copy="hideElements" cols="c2" rows="r7,r8" name="question.element"/>

Answer 1

我不知道你使用的是什么语法，但 html 输出应该是:

<input type="text" disabled="disabled" value="text goes here"/>

here is a fiddle