风格化输入选择[选项旁边的选项]

我试图用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

风格化输入选择[选项旁边的选项]

回答

相关问题