- 首页
- 前端开发
- 你能写一些自定义的 CSS 来相应地格式化 web 表单应用程序吗
你能写一些自定义的 CSS 来相应地格式化 web 表单应用程序吗
[英] Can you write some custom CSS to format web form application accordingly
本文介绍了你能写一些自定义的 CSS 来相应地格式化 web 表单应用程序吗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
抱歉，我对这个有点菜鸟，在此先感谢您.
我使用了一个表单构建工具(Granicus/Firmstep 表单)来构建一个表单，我正在努力使用 CSS 来让字段以我想要的方式显示.我通过使用 HTML 构建表单来生成表单，使其看起来完全符合我的要求.不幸的是，当我使用 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非输入"><div><span style="font-size: 12pt;"><strong>Q1) 问题 1</strong></span>
</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">之前的位置</span><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="这个字段是必填的"><legend class="hidden">之前的位置</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自动完成=关闭"><label class="radio-label btn" for="perviousPositionButton-0-AF-Field-b8ed31df-0be1-452c-a27d-581bcb225c6f-98ecfb9681">是</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自动完成=关闭"><label class="radio-label btn" for="perviousPositionButton-1-AF-Field-b8ed31df-0be1-452c-a27d-581bcb225c6f-98ecfb9681">否</label></span></fieldset><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></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">上次会议设定的目标</span><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="上次会议设置的目标" class="col-xs-11 col-sm-11 alignAbove fieldInput selectInput radio horizontal " data-mandatory-message="该字段为必填项"><legend class="hidden">上次会议设定的目标</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自动完成=关闭"><label class="radio-label btn" for="previousTargetButton-0-AF-Field-abb50bb1-f009-41c5-9218-948db13dfe77-98ecfb9681">是</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自动完成=关闭"><label class="radio-label btn" for="previousTargetButton-1-AF-Field-abb50bb1-f009-41c5-9218-948db13dfe77-98ecfb9681">否</label></span></fieldset><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></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">当前位置</span><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="这个字段是必需的"><legend class="hidden">当前位置</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自动完成=关闭"><label class="radio-label btn" for="currentPositionButton-0-AF-Field-0718de73-1544-47e4-ac16-d27b800a54f1-98ecfb9681">是</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自动完成=关闭"><label class="radio-label btn" for="currentPositionButton-1-AF-Field-0718de73-1544-47e4-ac16-d27b800a54f1-98ecfb9681">否</label></span></fieldset><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></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">下一次会议的目标</span><div class="af-block col-xs-1 col-sm-1"></div><fieldset name="targetSetButton" id="targetSetButton" data-name="targetSetButton" 数据类型="radio" role="radiogroup" aria-label="下一次会议的目标" class="col-xs-11 col-sm-11 alignAbove fieldInput selectInput radio horizontal " data-mandatory-message="此字段为必填项"><legend class="hidden">下一次会议的目标</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">是</label><;/span><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">否</label><;/span></fieldset><div class="screen-reader-error" aria-live="polite" aria-atomic="true"></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">上一个位置</span><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="该字段为必填项" data-min-message="请输入至少 _min_value_ 个字符" data-max-message="请输入不超过 _max_value_ 个字符" data-validation-mask-message="请输入格式的文本:_validation_mask_" autocomplete="off" style="溢出:隐藏；溢出包装:断字；调整大小:无；高度:70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="真"></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">上次会议设置的目标</span><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="该字段为必填项" data-min-message="请输入至少 _min_value_ 个字符" data-max-message="请输入不超过 _max_value_ 个字符" data-validation-mask-message="请输入格式的文本:_validation_mask_" autocomplete="off" style="溢出:隐藏；溢出包装:断字；调整大小:无；高度:70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="真"></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">当前位置</span><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="该字段为必填项" data-min-message="请输入至少 _min_value_ 个字符" data-max-message="请输入不超过 _max_value_ 个字符" data-validation-mask-message="请输入格式的文本:_validation_mask_" autocomplete="off" style="溢出:隐藏；溢出包装:断字；调整大小:无；高度:70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="真"></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">下一次会议的目标</span><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="该字段为必填项" data-min-message="请输入至少 _min_value_ 个字符" data-max-message="请输入不超过 _max_value_ 个字符" data-validation-mask-message="请输入格式的文本:_validation_mask_" autocomplete="off" style="溢出:隐藏；溢出包装:断字；调整大小:无；高度:70px;"></textarea><div class="screen-reader-error" aria-live="polite" aria-atomic="真"></div></div>
解决方案
顺便说一句，我可以使用 css 添加占位符吗?
是的，你可以.如果您想在 text-area 中执行此操作，请添加:
如果你想在外面这样做，只需创建一些html类并添加css.
Sorry I am a bit of a novice with this, thank you in advance.
I have used a form building tool (Granicus/ Firmstep forms) to build a form and I am struggling to nail the CSS to get the fields to display how I want. I have generated the form to look exactly how I want it by building the form using HTML. Unfortunately the application doesn't recognise the fields when I use HTML. So someone can complete the form but entries arent populated unless you build the form using the built in field selector.
What I am trying to achieve can be seen here where I built the form using HTML following the guidance in this question.
This is a of what I'm looking to achieve:
I can add a custom class to the fields but unfortunately I can't nail the CSS to target the correct fields and display the fields as shown in the link above.
Effectively what I want is 4 text areas side by side and in line. Above each text area there will be a radio button with the options yes and no. On top of the buttons there is a label.
As there are going to be multiple lines I need the CSS to specifically target each set of questions.
When I have inserted the correct fields the HTML generated for the fields on the page without any CSS are shown below. I can't amend the HTML, I can only add CSS to manipulate the fields. There is no custom editor that allows the user to inject CSS, the CSS must be coded in manually.
On a side note can I add a placeholder using 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>
解决方案
On a side note can I add a placeholder using css?
Yes, you can.
If you want to do that inside the text-area, add:
<textarea placeholder="Some text..."></textarea>
And if you want to do that outside, just create some html classes and add css.
这篇关于你能写一些自定义的 CSS 来相应地格式化 web 表单应用程序吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
