CSS挑戰：自定義廣播選擇

我設計了一個非常酷的外觀佈局，但沒有線索如何使它的收音機工作！下面是這個表格的模型： Sample of Form 我已經爲文本輸入創建了CSS（並且將在下面爲其他尋找類似的東西的人添加它）。我現在需要弄清楚的是「你在找什麼服務？」部分。我已經爲藍框編寫了CSS，但是現在我需要弄清楚如何將「諮詢，Web開發和圖形設計」轉變爲無線電選擇，其旁邊帶有複選標記的選擇框是選定的無線電框。超過我的頭。我仍然試圖弄清楚，如果我這樣做會回來的。只是尋找一些關於你如何寫這些無線電的輸入。CSS挑戰：自定義廣播選擇

文本輸入電流代碼：

input[type=text] { 
    width: 365px; 
    height: 54px; 
    margin: 0 0 12px 0; 
    padding: 0 0 0 25px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    background: #a2bdd8; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #76899d), color-stop(0.075, #a2bdd8)); 
    color: #fff; 
    font-size: 30px; 
    border: none; 
} 
*:focus { outline: none; }

當前代碼爲背景，以「你在找什麼樣的服務？」：

#options { 
    width: 270px; 
    height: 120px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    background: #a2bdd8; 
}

來源

2011-04-25 Robert Klubenspies

可能相關：http://stackoverflow.com/questions/5112995/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo – Blender 2011-04-25 01:44:48

jQuery有幾個收音機/複選框插件。我喜歡jquery.com上http://webscale.cms.ezcompany.nl/scan

<script src="/files/jquery.checkbox.min.js"></script> 
<link rel="stylesheet" href="/files/jquery.checkbox.css" /> 
<script> 
$('input[type=radio]').checkbox({empty: '/files/empty.png'}); 
</script>

插件列表中使用的一個：http://plugins.jquery.com/plugin-tags/checkbox

來源

2011-04-25 01:52:52 Rudie

Jquery-Checkbox（在谷歌代碼上）做到了！謝謝你的領導:) – 2011-04-25 02:45:49

是的，我喜歡那個。非常簡單的JS和其他一切可以在CSS中完成：所有狀態，大小，邊距等 – Rudie 2011-04-25 02:54:51

您需要創建圖像並將其替換您的複選框這些圖像。然後當點擊複選框時用javascript切換它們。

編輯：
我知道，谷歌是不冷靜了，因爲是這樣，但也許你會發現這些鏈接有用：
Custom checkbox howto
Another customized checkbox script & tutorial

來源

2011-04-25 01:43:25 Damb

聽起來像是個計劃。這就是我正在計算，但我試圖避免使用Javascript。猜猜我沒有選擇。並回答你的問題，只是幾個朋友。你有任何設計建議，讓它看起來更好？ – 2011-04-25 01:47:35

在純css afaik中不可能做出這樣的更改。而我的設計建議只是一個主觀的意見，所以可能不會有幫助。但是..我肯定會開始添加對比度（至少要提交按鈕），並調整字體大小。 – Damb 2011-04-25 01:51:14

你可以做沒有JS的樣式，但是切換仍然是JS。例如'input [type =「checkbox」] + span {..unchecked ..} input [type =「checkbox」]：checked + span {..checked ..}'（並隱藏輸入） – Rudie 2011-04-25 01:55:50

好了，我來看看你得到一個答案，但我建你的jsfiddle演示，因爲我喜歡這些類型的挑戰：

http://jsfiddle.net/Madmartigan/VkTZa/1/

用了jQuery（想不出一個純CSS好的解決方案）。也許這比使用插件簡單一點？

享受！

來源

2011-04-25 02:51:04

謝謝，這是非常全面的。並努力+1！我將不得不看我如何實現它:) – 2011-04-26 06:06:35

CSS挑戰：自定義廣播選擇

回答

相關問題