設置Wordpress聯系表單的樣式

Question

我正在為我的網站創建一個與此聯系表類似的聯系表。

http://www.solarmarket.com.au/

我試圖用Wordpress中的Contact Form 7創建它，但是我無法設置Checkboxes的樣式以使其類似於上面的復選框。 我已經看到了許多用於樣式字段的解決方案，但是我不能將其應用於單獨的復選框-如果可以對它們進行樣式設置，單選復選框似乎最適合此復選框。

有誰知道這種類型的表單是否可以在Contact Form 7中使用，或者是否有另一種Contact Form可以讓我創建該表單，因為我到處搜索並瀏覽了Contact Form 7上的所有文檔，但沒有找到解。

問候，

恰蘭

Answer 1

用firebug搜索div / class並在CSS中更改它？

Answer 2

只需編輯位於主題文件夾中的主題CSS文件（style.css），然后將以下內容添加到樣式表的底部即可 ：

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;

}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
}

見FIDDLE

注意：只需將焦點的顏色更改為所需的顏色即可。

UPDATE2：這是一個更簡單的解決方案： http : //jsfiddle.net/x54Fa/10/