風格化輸入選擇[選項旁邊的選項]

我試圖用CSS代碼HTML代碼。我需要將其設置爲複選框的切換開關。不幸的是需要留下輸入類型選擇。風格化輸入選擇[選項旁邊的選項]

這是可能的，或者我必須改變複選框，並應該風格化它？我以前從未使用CSS，我不知道從哪裏開始。當前代碼：

CSS：

<style> 

input[type=submit] { 
    width: 50%; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
} 


label, input[type=submit] { 
display: block; 
} 
div { 
    border-radius: 5px; 
    background-color: #f2f2f2; 
    padding: 20px; 
} 
</style>

HTML;

<h3>Using CSS to style an HTML Form</h3> 

<div> 
    <form> 
    <label for="decision">decision</label> 
    <select id="decision" name="decision"> 
     <option value="true">true</option> 
     <option value="false">false</option> 
    </select> 

    <input type="submit" value="Submit"> 
    </form> 
</div>

有沒有人有想法？

來源

2017-09-26 JJanek

我的建議是搜索互聯網來創建一個切換開關，如果你不熟悉bootstrap去學習bootstrap，我會建議使用[bootstrap switch]（http://bootstrapswitch.com/）！在線提交[系列]（https://www.youtube.com/watch?v=gqOEoUR5RHg） –

我無法添加eny external css/js librarys。我只能基於標準元素。並排水平 - 是 – JJanek

@JJanek一個簡單的網站爲您生成網站怎麼樣！ [這裏]（https://proto.io/freebies/onoff/） –

在CSS中，您可以通過（除其他之外）標記名/類/標識來定位不同的元素。在你的情況，我建議通過ID這樣做只是針對你的選擇元素：

#decision { 
    /* style goes here */ 
}

在這裏，你可以使用任何造型是與選擇元件兼容。

我建議你看看a guide for selectors，給你一個關於如何繼續的想法。祝你好運！

來源

2017-09-26 18:17:52 poh

風格化輸入選擇[選項旁邊的選項]

回答

相關問題