您可以编写一些自定义 CSS 来相应地格式化 Web 表单应用程序吗

Question

对不起，我有点新手，提前谢谢你。

我使用了一个表单构建工具（Granicus/Firmstep 表单）来构建一个表单，我正在努力确定 CSS 以使字段显示我想要的方式。通过使用 HTML 构建表单，我已经生成了表单以查看我想要的样子。不幸的是，当我使用 HTML 时，应用程序无法识别这些字段。因此，除非您使用内置字段选择器构建表单，否则有人可以填写表单但不会填充条目。

我想要达到的目标可以在 here 看到，我按照这个问题中的指导使用 HTML 构建了表单。

这是我想要实现的目标：

我可以向字段添加自定义类，但不幸的是，我无法确定 CSS 以定位正确的字段并显示如上面链接中所示的字段。

实际上我想要的是 4 个并排排列的文本区域。在每个文本区域上方都会有一个单选按钮，其中包含“是”和“否”选项。在按钮的顶部有一个标签。

由于会有多行，我需要 CSS 专门针对每组问题。

当我插入正确的字段后，为页面上的字段生成的 HTML 如下所示，没有任何 CSS。我无法修改 HTML，我只能添加 CSS 来操作字段。没有允许用户注入 CSS 的自定义编辑器，CSS 必须手动编码。

顺便说一句，我可以使用 css 添加占位符吗？

<span data-name="statictext7" data-type="staticText" class="col-xs-11 col-sm-11 fieldInput content staticText non-input ">
  <div>
    <span style="font-size: 12pt;"><strong>Q1) Question 1</strong></span>
  </div>
</span>

<div class="field" data-field-name="perviousPositionButton" data-field-type="radio"><div class="fieldContent">
  <label for="perviousPositionButton" class="col-xs-11 col-sm-11  fieldName alignAbove      ">
    <span class="_fieldName">Pervious position</span>
  </label>
  <div class="af-block col-xs-1 col-sm-1 "></div>
    <fieldset name="perviousPositionButton" id="perviousPositionButton" data-name="perviousPositionButton" data-type="radio" role="radiogroup" aria-label="Pervious position" class="col-xs-11 col-sm-11     alignAbove fieldInput selectInput radio horizontal " data-mandatory-message="This field is required">
      <legend class="hidden">Pervious position</legend>
      <span class="radio-wrapper">
        <input type="radio" id="perviousPositionButton-0-AF-Field-b8ed31df-0be1-452c-a27d-581bcb225c6f-98ecfb9681" name="perviousPositionButton" value="yes" required="true" class="radio2 " autocomplete="off">
        <label class="radio-label btn" for="perviousPositionButton-0-AF-Field-b8ed31df-0be1-452c-a27d-581bcb225c6f-98ecfb9681">Yes</label>
      </span>
      <span class="radio-wrapper">
        <input type="radio" id="perviousPositionButton-1-AF-Field-b8ed31df-0be1-452c-a27d-581bcb225c6f-98ecfb9681" name="perviousPositionButton" value="no" required="true" class="radio2 " autocomplete="off">
        <label class="radio-label btn" for="perviousPositionButton-1-AF-Field-b8ed31df-0be1-452c-a27d-581bcb225c6f-98ecfb9681">No</label>
      </span>
    </fieldset>
    <div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div>
  </div>
</div>

<div class="field" data-field-name="previousTargetButton" data-field-type="radio">
  <div class="fieldContent">
    <label for="previousTargetButton" class="col-xs-11 col-sm-11  fieldName alignAbove      ">
      <span class="_fieldName">Target set at last meeting</span>                
    </label>
    <div class="af-block col-xs-1 col-sm-1 "></div>
    <fieldset name="previousTargetButton" id="previousTargetButton" data-name="previousTargetButton" data-type="radio" role="radiogroup" aria-label="Target set at last meeting" class="col-xs-11 col-sm-11     alignAbove fieldInput selectInput radio horizontal " data-mandatory-message="This field is required">
      <legend class="hidden">Target set at last meeting</legend>
      <span class="radio-wrapper">
        <input type="radio" id="previousTargetButton-0-AF-Field-abb50bb1-f009-41c5-9218-948db13dfe77-98ecfb9681" name="previousTargetButton" value="yes" required="true" class="radio2 " autocomplete="off">
        <label class="radio-label btn" for="previousTargetButton-0-AF-Field-abb50bb1-f009-41c5-9218-948db13dfe77-98ecfb9681">Yes</label>
      </span>
      <span class="radio-wrapper">
        <input type="radio" id="previousTargetButton-1-AF-Field-abb50bb1-f009-41c5-9218-948db13dfe77-98ecfb9681" name="previousTargetButton" value="no" required="true" class="radio2 " autocomplete="off">
        <label class="radio-label btn" for="previousTargetButton-1-AF-Field-abb50bb1-f009-41c5-9218-948db13dfe77-98ecfb9681">No</label>
      </span>
    </fieldset>
    <div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div>
  </div>
</div>

<div class="field" data-field-name="currentPositionButton" data-field-type="radio">
  <div class="fieldContent">
    <label for="currentPositionButton" class="col-xs-11 col-sm-11  fieldName alignAbove     ">
      <span class="_fieldName">Current Position</span>
    </label>
    <div class="af-block col-xs-1 col-sm-1 "></div>
    <fieldset name="currentPositionButton" id="currentPositionButton" data-name="currentPositionButton" data-type="radio" role="radiogroup" aria-label="Current Position" class="col-xs-11 col-sm-11     alignAbove fieldInput selectInput radio horizontal " data-mandatory-message="This field is required">
      <legend class="hidden">Current Position</legend>
      <span class="radio-wrapper">
        <input type="radio" id="currentPositionButton-0-AF-Field-0718de73-1544-47e4-ac16-d27b800a54f1-98ecfb9681" name="currentPositionButton" value="yes" required="true" class="radio2 " autocomplete="off">
        <label class="radio-label btn" for="currentPositionButton-0-AF-Field-0718de73-1544-47e4-ac16-d27b800a54f1-98ecfb9681">Yes</label>
      </span>
      <span class="radio-wrapper">
        <input type="radio" id="currentPositionButton-1-AF-Field-0718de73-1544-47e4-ac16-d27b800a54f1-98ecfb9681" name="currentPositionButton" value="no" required="true" class="radio2 " autocomplete="off">
        <label class="radio-label btn" for="currentPositionButton-1-AF-Field-0718de73-1544-47e4-ac16-d27b800a54f1-98ecfb9681">No</label>
      </span>
    </fieldset>
    <div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div>
  </div>
</div>

<div class="field" data-field-name="targetSetButton" data-field-type="radio"><div class="fieldContent"><label for="targetSetButton" class="col-xs-11 col-sm-11  fieldName alignAbove        "><span class="_fieldName">Target for next meeting</span>               </label>    <div class="af-block col-xs-1 col-sm-1 "></div><fieldset name="targetSetButton" id="targetSetButton" data-name="targetSetButton" data-type="radio" role="radiogroup" aria-label="Target for next meeting" class="col-xs-11 col-sm-11     alignAbove fieldInput selectInput radio horizontal " data-mandatory-message="This field is required"><legend class="hidden">Target for next meeting</legend><span class="radio-wrapper">   <input type="radio" id="targetSetButton-0-AF-Field-43bae0a1-0dca-4982-8a61-0d34728bfd27-98ecfb9681" name="targetSetButton" value="yes" required="true" class="radio2 " autocomplete="off"><label class="radio-label btn" for="targetSetButton-0-AF-Field-43bae0a1-0dca-4982-8a61-0d34728bfd27-98ecfb9681">Yes</label></span><span class="radio-wrapper">    <input type="radio" id="targetSetButton-1-AF-Field-43bae0a1-0dca-4982-8a61-0d34728bfd27-98ecfb9681" name="targetSetButton" value="no" required="true" class="radio2 " autocomplete="off"><label class="radio-label btn" for="targetSetButton-1-AF-Field-43bae0a1-0dca-4982-8a61-0d34728bfd27-98ecfb9681">No</label></span></fieldset><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div></div> </div>

<div class="field" data-field-name="previousTarget" data-field-type="textarea"><div class="fieldContent textAreaColumn"><label for="previousTarget" class="col-xs-11 col-sm-11  fieldName hide hideLabel        "><span class="_fieldName">Pervious position</span>             </label>    <div class="af-block col-xs-1 col-sm-1 hidden-xs hidden-sm hidden-md hidden-lg"></div><textarea data-name="previousTarget" id="previousTarget" name="previousTarget" data-type="textarea" class="col-xs-11 col-sm-11     hideLabel fieldInput textarea " data-mandatory-message="This field is required" data-min-message="Please input at least _min_value_ characters" data-max-message="Please input no more than _max_value_ characters" data-validation-mask-message="Please input text of the format: _validation_mask_" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div></div> </div>

<div class="field" data-field-name="previousTarget" data-field-type="textarea"><div class="fieldContent textAreaColumn"><label for="previousTarget" class="col-xs-11 col-sm-11  fieldName hide hideLabel        "><span class="_fieldName">Target set at last meeting</span>                </label>    <div class="af-block col-xs-1 col-sm-1 hidden-xs hidden-sm hidden-md hidden-lg"></div><textarea data-name="previousTarget" id="previousTarget" name="previousTarget" data-type="textarea" class="col-xs-11 col-sm-11     hideLabel fieldInput textarea " data-mandatory-message="This field is required" data-min-message="Please input at least _min_value_ characters" data-max-message="Please input no more than _max_value_ characters" data-validation-mask-message="Please input text of the format: _validation_mask_" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div></div> </div>

<div class="field" data-field-name="previousTarget" data-field-type="textarea"><div class="fieldContent textAreaColumn"><label for="previousTarget" class="col-xs-11 col-sm-11  fieldName hide hideLabel        "><span class="_fieldName">Current Position</span>              </label>    <div class="af-block col-xs-1 col-sm-1 hidden-xs hidden-sm hidden-md hidden-lg"></div><textarea data-name="previousTarget" id="previousTarget" name="previousTarget" data-type="textarea" class="col-xs-11 col-sm-11     hideLabel fieldInput textarea " data-mandatory-message="This field is required" data-min-message="Please input at least _min_value_ characters" data-max-message="Please input no more than _max_value_ characters" data-validation-mask-message="Please input text of the format: _validation_mask_" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div></div> </div>

<div class="field" data-field-name="previousTarget" data-field-type="textarea"><div class="fieldContent textAreaColumn"><label for="previousTarget" class="col-xs-11 col-sm-11  fieldName hide hideLabel        "><span class="_fieldName">Target for next meeting</span>               </label>    <div class="af-block col-xs-1 col-sm-1 hidden-xs hidden-sm hidden-md hidden-lg"></div><textarea data-name="previousTarget" id="previousTarget" name="previousTarget" data-type="textarea" class="col-xs-11 col-sm-11     hideLabel fieldInput textarea " data-mandatory-message="This field is required" data-min-message="Please input at least _min_value_ characters" data-max-message="Please input no more than _max_value_ characters" data-validation-mask-message="Please input text of the format: _validation_mask_" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></div></div> </div>

Answer 1

顺便说一句，我可以使用 css 添加占位符吗？

是的，你可以。 如果您想在 text-area 内执行此操作，请添加：

<textarea placeholder="Some text..."></textarea>

如果你想在外面做，只需创建一些 html 类并添加 css。