Google Form笔记（2）：自定义CSS样式

icewent — Sun, 13 Sep 2009 04:02:09 +0000

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做了四个表单），进入首页点击链接会随机进入一个表单，查看。

也许你还喜欢：