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

Question

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

我已经使用了一个表单构建工具（Granicus/Firmstep forms）构建了一个表单，我正在努力钉钉CSS以使字段按我想要的方式显示。通过使用HTML构建表单，我生成了表单，使其看起来完全符合我的要求。不幸的是，当我使用HTML时，应用程序无法识别这些字段。因此，只有使用内置的字段选择器构建表单，才能完成表单，但不填充条目。

我试图实现的目标可以在这里看到，在这里我按照这个问题中的指导使用HTML构建表单。

我可以添加一个自定义类到字段，但不幸的是，我不能钉钉CSS以正确的字段为目标，并显示字段，如上面的链接所示。

有效地，我想要的是4个文本区域并排和在行。在每个文本区域的上方都有一个带有“是”和“否”选项的单选按钮。在按钮的顶部有一个标签。

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

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

另外，我可以使用CSS添加一个占位符吗？

null

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

null

Answer 1

另外，我可以使用CSS添加一个占位符吗？

是的，你可以。如果要在文本区域内执行此操作，请添加：

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

如果你想在外面做这件事，只需创建一些html类并添加CSS即可。