Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 12171

How can I make these checkboxes and labels Inline

$
0
0

I tried to make them inline by changing their display to inline-flex and item-align to borderline but it dosent work.

input[type="checkbox"] {  display: none;}input[type="checkbox"]+label::before {  content: "";  position: absolute;  left: 0;  top: 0;  width: 20px;  height: 20px;  border: 2px solid #ccc;  border-radius: 3px;  background: #fff;  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);}input[type="checkbox"]:checked+label::before {  background-color: #4caf50;  border-color: #4caf50;}input[type="checkbox"]:checked+label::after {  content: "✓";  position: absolute;  left: 4px;  top: -2px;  color: #fff;  font-size: 18px;  line-height: 20px;}.checkbox-container {  display: flex;  align-items: baseline;}
<main><h1 id="title">Survey form</h1><p id="description">    Thank you for taking time to help us improving this site</p><div class="imp"><form id="survey-form"><fieldset><div><label for="question">Would you use this website in future?<br /><input                  type="radio"                  value="yes"                  name="question"                  id="question"                  checked                />Yes<input                  type="radio"                  value="no"                  name="question"                  id="question"                />No</label></div><div class="checkbox-container"><input type="checkbox" value="Anime" id="best-part-anime" name="best-part" /><label for="best-part-anime">Anime streaming in 4K quality</label></div><div class="checkbox-container"><input type="checkbox" value="Manga" id="best-part-manga" name="best-part" /><label for="best-part-manga">Manga in HD quality</label></div><div class="checkbox-container"><input type="checkbox" value="Torrent" id="best-part-torrent" name="best-part" /><label for="best-part-torrent">Torrent streaming</label></div><div class="checkbox-container"><input type="checkbox" value="Other" id="best-part-other" name="best-part" /><label for="best-part-other">Other</label></div><div><label for="Other">(Please specify your problen in certain or any other feedback)<textarea                  id="other"                  name="other"                  value="other"                  placeholder="Tell us more about your problem"></textarea></label></div></fieldset><button type="submit" value="Submit" id="submit">Submit</button></form></div></main>

pls help me when inspect to do so it works but after i do same(what i edit there) in vs code it dosent work....

I want to make the labels and checkboxes appear in same line... but I can't figure out what's wrong here


Viewing all articles
Browse latest Browse all 12171

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>