Google Form笔记(2):自定义CSS样式

Google Form 虽然强大,但并未提供自定义表单的功能。不过,它也留了后门。

后门就是页面源代码。打开一个表单的页面,查看页面源代码,把所有代码都复制下来,保存到一个网页文件里,这样,我们就可以随心所欲地去修改它了。

粘过来的代码,需要做一点点修改:因为Google Form外联的样式表是放在自己的服务器上,所以路径直接用的/,我们把这里改成https://,如图:

(把原来的“/spreadsheets”改成“https://spreadsheets”)

因为内嵌样式表(style标签内定义的样式)的优先级比外联样式表要高,所以我们直接在head标签内增加需要修改的样式,不想改的直接继承。

这一次主要讲讲Google Form里的一些常用的CSS样式(不全,可能有错),并提供两个例子以供参考。一、常用CSS样式可以下载这张图片对比每个样式:

CSS属性浅析

这里是实现上面这个样子的代码,有点难看,为了说事儿,忍了。

1.全局样式

.ss-base-body:整个页面的背景,可以控制背景的颜色、背景图等

.ss-form-container:浮在ss-base-body上方的表单容器,是表单的主体,整个表单都在里面

.ss-form-heading:表单的“题头”,包括表单标题、说明、以及“必填”字样

.ss-form-title:表单的标题

.ss-form-desc:表单的说明,即“卷首语”

.ss-required-asterisk:“必埴”样式

.ss-q-title:问题的标题

.ss-q-help:问题的说明

.ss-item:表单条目

.ss-form-entry:表单条目

2.具体题型章节

.ss-section-header:章节样式

.ss-section-title:章节标题

.ss-section-description:章节说明多重选择

.ss-radio 复选框

.ss-choices:复选框样式

.ss-choice-label:选项标签

.ss-choice-item:选项条目从列表中选择

.ss-select:从列表中选择样式比例

.ss-scale:比例样式

.ss-scalenumbers:比例的数字

.ss-scalenumber:比例的数字

.ss-scalerow:比例所在的一行,包括左标签、选项、右标签

.ss-leftlabel:比例左标签

.ss-rightlabel:比例右标签网格

.ss-grid:网格样式

.ss-gridnumbers:网格横坐标,“行”的样式

.ss-gridrow:网格纵坐标,“列”的样式文本

.ss-text 段落文本

.ss-paragraph-text,.ss-legal,.ss-terms Google版权相关

.ss-footer:底部

自定义CSS另解:Google Docs 的 CSS 注入漏洞使你可以自定义 CSS 样式(已修正,无法使用)

Flemming Steffensen找到了一个通过CSS注入从而自己修改Google Docs 生成提交表单的CSS样式的技巧。

比如你的一个表单的地址是这样的:

http://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE

你可以新增一些CSS规则作为f参数的变量:

http://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=;}body{font-size:14pt!important}.ss-q-title{color:green}

结果见此

备注:

  • 注入的CSS要以“;}”为开头
  • 你需要使用“!important”来强制修改一些已有的变量
  • 你可以看看Google Docs页面的源代码,找出他们使用class的方式
  • Google可能随时会修复这个小漏洞

更多自定义Google Docs表单的参数见此

两个例子(已失效)

例1:这是一个订购毕业衫的下订单用的表单,查看

例2:这是一个心理学小实验,要实现的是把被试分为四个组,做不同的问卷(我用Google Form做了四个表单),进入首页点击链接会随机进入一个表单,查看

阅读 17