Removing bullet in unordered list for switches
Question
I'm trying to display multiple rounded switches in an unordered list. It looks like this: https://imgur.com/a/ECIpoAL
Now I noticed, that the bullets of the unordered list are still there and I tried to remove them with list-style-type: none; . However this would kinda collapse the whole list and the switches are overlapping. I just started html/css so I don't really know what is going on there.
The HTML
.switches{ border: 1px solid white; float: right; margin-right: 40px; width: 200px; } /*.switches ul{ list-style-type: none; not working } */.switches ul li{ margin: 13px; }.switch { position: absolute; display: inline-flex; right: 20%; width: 40px; height: 23px; float: right; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.switch span{ color: #cdcbcb; text-shadow: 1px 1px 2px #1a1919; margin-left: 47px; margin-top: 4px; }.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px); }
<!DOCTYPE html> <html> <head> </head> <body> <div class="switches"> <ul> <li> <label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> <span>Test</span> </label> </li> <li> <label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> <span>Test2</span> </label> </li> </ul> </div> </body> </html>
3 answers
solution1
1 2020-06-28 14:28:14
This is what I suggest:
https://jsfiddle.net/sheriffderek/a5nuqtkL/
You'll need to work out the checkbox styling ( https://codepen.io/sheriffderek/pen/bGEqEdB ) - but here's how the layout bits should work. Make sure you progressively enhance these - instead of creating something that isn't accessible. (you need official labels etc)
* { /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ box-sizing: border-box; }.field-list { list-style: none; margin: 0; padding: auto; }.field-list input, .field-list label { display: block; /* inline by default */ }.field-list.field { display: flex; flex-direction: row; align-items: center; }.field-list label { padding: 5px 10px; }
<ul class="field-list"> <li class='field'> <input id="one" type="checkbox"> <label for="one">Thing one</label> </li> <li class='field'> <input id="two" type="checkbox"> <label for="two">Thing two</label> </li> </ul>
solution2
1 2020-06-28 14:28:57
Use list-style: none; or list-style-type: none; with display:flex; and flex-direction: column; for avoiding overlapping of items.
ul{ list-style-type: none; display: flex; flex-direction: column; }.switches{ border: 1px solid white; float: right; margin-right: 40px; width: 200px; } /*.switches ul{ list-style-type: none; not working } */.switches ul li{ margin: 13px; }.switch { position: absolute; display: inline-flex; right: 20%; width: 40px; height: 23px; float: right; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.switch span{ color: #cdcbcb; text-shadow: 1px 1px 2px #1a1919; margin-left: 47px; margin-top: 4px; }.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px); }
<!DOCTYPE html> <html> <head> </head> <body> <div class="switches"> <ul> <li> <label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> <span>Test</span> </label> </li> <li> <label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> <span>Test2</span> </label> </li> </ul> </div> </body> </html>
solution3
1 ACCPTED 2020-06-28 14:39:41
The problem of "collpasing" is due to your position: absolute in the styles of .switch .
When list-style-type: none; no content is inside each .li . And therefore .li will occupy no space.
I did some changes on the .switch styles:
.switch {
/* position: absolute; */
position: relative;
display: inline-flex;
right: 20%;
width: 40px;
height: 23px;
/* float: right; <-- you don't need this when `relative`. Otherwise items will still "collpased". */
}
For your list style:
.switches ul{
list-style-type: none;
}
The following snippet is the modified version:
.switches{ border: 1px solid white; float: right; margin-right: 40px; width: 200px; }.switches ul{ list-style-type: none; }.switches ul li{ margin: 13px; }.switch { position: relative; display: inline-flex; right: 20%; width: 40px; height: 23px; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.switch span{ color: #cdcbcb; text-shadow: 1px 1px 2px #1a1919; margin-left: 47px; margin-top: 4px; }.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px); }
<!DOCTYPE html> <html> <head> </head> <body> <div class="switches"> <ul> <li> <label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> <span>Test</span> </label> </li> <li> <label class="switch"> <input type="checkbox" checked> <div class="slider round"></div> <span>Test2</span> </label> </li> </ul> </div> </body> </html>
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.