对不起,我对这个有点新手,提前谢谢你。
我已经使用了一个表单构建工具(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
另外,我可以使用CSS添加一个占位符吗?
是的,你可以。如果要在文本区域内执行此操作,请添加:
<textarea placeholder="Some text..."></textarea>
如果你想在外面做这件事,只需创建一些html类并添加CSS即可。