问题描述
抱歉，我对这个有点菜鸟，在此先感谢您。
我使用了一个表单构建工具（Granicus/Firmstep 表单）来构建一个表单，我正在努力使用 CSS 来让字段以我想要的方式显示。我通过使用 HTML 构建表单来生成表单，使其看起来完全符合我的要求。不幸的是，当我使用 HTML 时，应用程序无法识别这些字段。因此，除非您使用内置字段选择器构建表单，否则有人可以完成表单但不会填充条目。
我试图实现的目标可以在 here 中看到，我按照此问题中的指导使用 HTML 构建表单。
这是我希望实现的目标：
我可以向字段添加自定义类，但不幸的是我无法确定 CSS 以定位正确的字段并显示如上面链接中所示的字段。
实际上我想要的是 4 个并排并排成一行的文本区域。在每个文本区域上方将有一个单选按钮，其中包含选项是和否。按钮顶部有一个标签。
由于会有多行，我需要 CSS 专门针对每组问题。
当我插入正确的字段时，为页面上的字段生成的 HTML 显示如下。我无法修改 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>解决方法
顺便说一句，我可以使用 css 添加占位符吗？
是的，你可以。 如果您想在 text-area 中执行此操作，请添加：
<textarea placeholder="Some text..."></textarea>
如果你想在外面这样做，只需创建一些html类并添加css。