I grabbed a simple tab control from the css tricks site and its working great for me, except when I have two tab controls on the same page, clicking the bottom control simply changes the tab page of the top control.
The CSS Tricks page with the original code is here
Changing the name= attribute for the second group doesn't fix it.
Renaming the id's of each tab in the second group also doesn't fit it.
Is there a way to have two independently operating tabs on the same page ?
FWIW the HTML and CSS are fairly simple:
.tabs {
position: relative;
min-height: 100px;
clear: both;
margin: 25px 0;
}
.tabs .tab {
float: left;
}
.tabs .tab label {
background: #eee;
padding: 5px 15px 5px 15px;
border: 1px solid #ccc;
position: relative;
left: 1px;
cursor: pointer;
}
.tabs .tab [type=radio] {
display: none;
}
.tabs .content {
position: absolute;
top: 18px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow:auto;
}
.tabs [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff2
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff3
</div>
</div>
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff4
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff5
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff6
</div>
</div>
</div>
The part to change is the label and the id:
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
I've edited your snippet.
.tabs {
position: relative;
min-height: 100px;
clear: both;
margin: 25px 0;
}
.tabs .tab {
float: left;
}
.tabs .tab label {
background: #eee;
padding: 5px 15px 5px 15px;
border: 1px solid #ccc;
position: relative;
left: 1px;
cursor: pointer;
}
.tabs .tab [type=radio] {
display: none;
}
.tabs .content {
position: absolute;
top: 18px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow:auto;
}
.tabs [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff2
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff3
</div>
</div>
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1" checked>
<label for="tab-4">Tab One</label>
<div class="content">
stuff4
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">Tab Two</label>
<div class="content">
stuff5
</div>
</div>
<div class="tab">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">Tab Three</label>
<div class="content">
stuff6
</div>
</div>
</div>
Related
What I am trying to do is have the user click on any number throughout a rating scale (with each number as a radio button) and have the background color of the design around that number only. However, as I demonstrate below, when the user clicks on the #1 for example, it changes the background color of every radiobutton in the scale. How can I apply it to each individual one?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: bisque;
overflow: hidden;
}
.head{
text-align: center;
transform: translate(20px, 150px);
}
.rating{
transform: translate(320px, 200px);
}
.rating label{
cursor: pointer;
margin-right: 30px;
border: 1px solid #000;
border-radius: 25px;
padding: 5px 10px;
background-color: white;
}
.rating input{
display: none;
}
.labels{
display: flex;
list-style: none;
}
input#rate1:checked ~ label{
background-color: blue;
}
.bottom{
transform: translate(300px, 150px);
}
</style>
</head>
<body>
<div class="head">
<h1>On a Scale From 0-10, How Are You Feeling?</h1>
</div>
<div class="labels">
<ul>
<li>Rock Bottom</li>
<li>Terrible</li>
</ul>
</div>
<div class="rating">
<input type="radio" name="rating" id="rate0"><label for="rate0"
>0</label>
<input type="radio" name="rating" id="rate1"><label for="rate1"
>1</label>
<input type="radio" name="rating" id="rate2"><label for="rate2"
>2</label>
<input type="radio" name="rating" id="rate3"><label for="rate3"
>3</label>
<input type="radio" name="rating" id="rate4"><label for="rate4"
>4</label>
<input type="radio" name="rating" id="rate5"><label for="rate5"
>5</label>
<input type="radio" name="rating" id="rate6"><label for="rate6"
>6</label>
<input type="radio" name="rating" id="rate7"><label for="rate7"
>7</label>
<input type="radio" name="rating" id="rate8"><label for="rate8"
>8</label>
<input type="radio" name="rating" id="rate9"><label for="rate9"
>9</label>
<input type="radio" name="rating" id="rate10"><label for="rate10"
>10</label>
<div class="bottom">
<button class="btn1">Next</button>
</div>
</div>
</body>
</html>
The problem was this rule:
input#rate1:checked ~ label{
background-color: blue;
}
This way you are referring to all the tags label. But you only need to refer to the current one, so you need to add the corresponding attribute, like this:
input#rate1:checked ~ label[for="rate1"]{
background-color: blue;
}
Was it necessary?
body{
margin: 0px;
padding: 0px;
background-color: bisque;
overflow: hidden;
}
.head{
text-align: center;
transform: translate(20px, 150px);
}
.rating{
transform: translate(320px, 200px);
}
.rating label{
cursor: pointer;
margin-right: 30px;
border: 1px solid #000;
border-radius: 25px;
padding: 5px 10px;
background-color: white;
}
.rating input{
display: none;
}
.labels{
display: flex;
list-style: none;
}
input#rate0:checked ~ label[for="rate0"]{
background-color: blue;
}
input#rate1:checked ~ label[for="rate1"]{
background-color: blue;
}
input#rate2:checked ~ label[for="rate2"]{
background-color: blue;
}
input#rate3:checked ~ label[for="rate3"]{
background-color: blue;
}
input#rate4:checked ~ label[for="rate4"]{
background-color: blue;
}
input#rate5:checked ~ label[for="rate5"]{
background-color: blue;
}
input#rate6:checked ~ label[for="rate6"]{
background-color: blue;
}
input#rate7:checked ~ label[for="rate7"]{
background-color: blue;
}
input#rate8:checked ~ label[for="rate8"]{
background-color: blue;
}
input#rate9:checked ~ label[for="rate9"]{
background-color: blue;
}
input#rate10:checked ~ label[for="rate10"]{
background-color: blue;
}
.bottom{
transform: translate(300px, 150px);
}
<body>
<div class="head">
<h1>On a Scale From 0-10, How Are You Feeling?</h1>
</div>
<div class="labels">
<ul>
<li>Rock Bottom</li>
<li>Terrible</li>
</ul>
</div>
<div class="rating">
<input type="radio" name="rating" id="rate0"><label for="rate0"
>0</label>
<input type="radio" name="rating" id="rate1"><label for="rate1"
>1</label>
<input type="radio" name="rating" id="rate2"><label for="rate2"
>2</label>
<input type="radio" name="rating" id="rate3"><label for="rate3"
>3</label>
<input type="radio" name="rating" id="rate4"><label for="rate4"
>4</label>
<input type="radio" name="rating" id="rate5"><label for="rate5"
>5</label>
<input type="radio" name="rating" id="rate6"><label for="rate6"
>6</label>
<input type="radio" name="rating" id="rate7"><label for="rate7"
>7</label>
<input type="radio" name="rating" id="rate8"><label for="rate8"
>8</label>
<input type="radio" name="rating" id="rate9"><label for="rate9"
>9</label>
<input type="radio" name="rating" id="rate10"><label for="rate10"
>10</label>
<div class="bottom">
<button class="btn1">Next</button>
</div>
</div>
</body>
The problem is exactly what user surgey kuznetsov stated :- the ~.
Just a + can solve the issue and make it terribly small. It selects only the next adjacent sibling. No need for adding several lines of css and markup - three lines do it all-
body{
margin: 0px;
padding: 0px;
background-color: bisque;
overflow: hidden;
}
.head{
text-align: center;
transform: translate(20px, 150px);
}
.rating{
transform: translate(320px, 200px);
}
.rating label{
cursor: pointer;
margin-right: 30px;
border: 1px solid #000;
border-radius: 25px;
padding: 5px 10px;
background-color: white;
}
.rating input{
display: none;
}
.labels{
display: flex;
list-style: none;
}
input:checked + label{
background-color: blue;
}
.bottom{
transform: translate(300px, 150px);
}
<div class="head">
<h1>On a Scale From 0-10, How Are You Feeling?</h1>
</div>
<div class="labels">
<ul>
<li>Rock Bottom</li>
<li>Terrible</li>
</ul>
</div>
<div class="rating">
<input type="radio" name="rating" id="rate0"><label for="rate0"
>0</label>
<input type="radio" name="rating" id="rate1"><label for="rate1"
>1</label>
<input type="radio" name="rating" id="rate2"><label for="rate2"
>2</label>
<input type="radio" name="rating" id="rate3"><label for="rate3"
>3</label>
<input type="radio" name="rating" id="rate4"><label for="rate4"
>4</label>
<input type="radio" name="rating" id="rate5"><label for="rate5"
>5</label>
<input type="radio" name="rating" id="rate6"><label for="rate6"
>6</label>
<input type="radio" name="rating" id="rate7"><label for="rate7"
>7</label>
<input type="radio" name="rating" id="rate8"><label for="rate8"
>8</label>
<input type="radio" name="rating" id="rate9"><label for="rate9"
>9</label>
<input type="radio" name="rating" id="rate10"><label for="rate10"
>10</label>
<div class="bottom">
<button class="btn1">Next</button>
</div>
</div>
You can apply this tips to design your radio whatever what you want :
it's to make one element of each radio in the behind of radio,
and each appearance of radio makes none then you can add your style in these elements that shown and the click is on the radio that one ,so i just make here clean your code and give you a solution based on what i understood :
#CSS
body {
margin: 0px;
padding: 0px;
background-color: bisque;
overflow: hidden;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center;
height: 80vh;
}
.rating label {
cursor: pointer;
margin-right: 30px;
border: 1px solid #000;
border-radius: 25px;
padding: 5px 10px;
background-color: white;
}
input {
-webkit-appearance: none;
}
input:checked+label {
background-color: rgb(255, 233, 40);
}
/////
#HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styleeee.css">
<title>Document</title>
</head>
<body>
<body>
<div class="labels">
<ul>
<li>Rock Bottom</li>
<li>Terrible</li>
</ul>
</div>
<div class="head">
<h1>On a Scale From 0-10, How Are You Feeling?</h1>
</div>
<div class="rating">
<input type="radio" name="rating" id="rate0"><label for="rate0">0</label>
<input type="radio" name="rating" id="rate1"><label for="rate1">1</label>
<input type="radio" name="rating" id="rate2"><label for="rate2">2</label>
<input type="radio" name="rating" id="rate3"><label for="rate3">3</label>
<input type="radio" name="rating" id="rate4"><label for="rate4">4</label>
<input type="radio" name="rating" id="rate5"><label for="rate5">5</label>
<input type="radio" name="rating" id="rate6"><label for="rate6">6</label>
<input type="radio" name="rating" id="rate7"><label for="rate7">7</label>
<input type="radio" name="rating" id="rate8"><label for="rate8">8</label>
<input type="radio" name="rating" id="rate9"><label for="rate9">9</label>
<input type="radio" name="rating" id="rate10"><label for="rate10">10</label>
</div>
<div class="bottom">
<button class="btn1">Next</button>
</div>
</body>
</body>
</html>
Problem: the html/css below displays the tabs fine but I would like to align them to the center. I have tried various ways but they still align to the left. How can I align the three tabs to the center and keep them inline-block? Any help is greatly appreciated, thank you.
I also attached a picture for reference.
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs {
display: none;
width: 100%;
margin: 0 auto;
}
label {
display: inline-block;
margin: 0 auto;
padding: 15px 25px;
text-align: center;
color: #bbb;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs:checked+label {
color: #555;
border-bottom: 2px solid orange;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}
<main>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<section id="content1">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 2</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content2">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content3">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
</main>
Here is my take at it using flexbox.
I added some holders and some css code
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs {
display: none;
margin: 0 auto;
}
label {
padding: 15px 25px;
text-align: center;
color: #bbb;
display: flex;
border: 1px solid blue;
align-self: center;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs-holder {
display: flex;
align-items: center;
flex-direction: column;
border: 1px solid red;
}
.tabs-grouper {
display: flex;
flex-direction: row;
border: 1px solid green;
}
<div class="tabs-holder">
<div class="tabs-grouper">
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
</div>
</div>
Simply add text-align: center to main, and then reset it all on section using text-align:left.
It will affect inline-block elements, but not your section being block, though as descendants might inherit it, the reset will take care of that.
Stack snippet
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
text-align: center; /* added */
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
text-align: left; /* added */
}
.tabs {
display: none;
width: 100%;
margin: 0 auto;
}
label {
display: inline-block;
margin: 0 auto;
padding: 15px 25px;
text-align: center;
color: #bbb;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs:checked+label {
color: #555;
border-bottom: 2px solid orange;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}
<main>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<section id="content1">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 2</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content2">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content3">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
</main>
You could wrap the tabs in a div and then set the wrapper css to margin:auto and width:20% or whatever keeps them inline.
I use the always good cheat, center tags!
<center>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
</center>
I have this source code. It's supposed to switch between tabs after clicking on any of the buttons. Everything works fine but when I try to wrap buttons in div it stops working and it doesnt display content anymore.
.main {
margin: 0 auto;
min-width: 320px;
max-width: 800px;
}
.content {
background: #fff;
color: #373737;
}
.content>div {
display: none;
padding: 20px 25px 5px;
}
input {
display: none;
}
label {
display: inline-block;
padding: 15px 25px;
font-weight: 600;
text-align: center;
}
label:hover {
color: #fff;
cursor: pointer;
}
input:checked+label {
background: #ed5a6a;
color: #fff;
}
#tab1:checked~.content #content1,
#tab2:checked~.content #content2,
#tab3:checked~.content #content3,
#tab4:checked~.content #content4 {
display: block;
}
<div class="main">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">111</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">222</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">333</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">444</label>
<div class="content">
<div id="content1">
<p>
111
</p>
</div>
<div id="content2">
<p>
222
</p>
</div>
<div id="content3">
<p>
333
</p>
</div>
<div id="content4">
<p>
444
</p>
</div>
</div>
</div>
The code above is working, but I would like to wrap this part in div:
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">111</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">222</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">333</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">444</label>
The issue is that you are changing the document structure and this selector:
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
display: block;
}
no longer matches the content areas. I can't think of a selector that would work because the addition of the new div breaks the sibling relationship between the tabs and the content.
However, you can add your div and make the code much simpler if you abandon the hidden radio buttons and the labels and just use a elements that target the content area that is supposed to be displayed. Then the CSS :target pseudo-class can be used to display the current content area that is the target of the clicked link.
Additionally, it's not clear why you have the actual content in a p that is inside of the div. That doesn't seem necessary.
<!doctype html>
<html lang="en">
<head>
<style>
.main {margin: 0 auto; min-width: 320px; max-width: 800px;}
.content {background: #fff; color: #373737;}
.content > div {display: none; padding: 20px 25px 5px;}
a {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
a:hover {color: #fff; cursor: pointer;}
a:link {background: #ed5a6a; color: #fff; text-decoration:none; }
.content > :target
{
display: block;
}
</style>
</head>
<body>
<div class="main">
<div id="parent">
111
222
333
444
</div>
<div class="content">
<div id="content1">111</div>
<div id="content2">222</div>
<div id="content3">333</div>
<div id="content4">444</div>
</div>
</div>
</body>
</html>
I'm attempting to create a similar UI as below using radio inputs. Most of the UI was fairly easy to recreate, the only exception is adding the arrow (icon?) to the end of the label div. I've attempted to div an arrow in and force it to the center using margins, but it's obviously not a very good solution. What's the best way to add the arrow at the end of the label?
Here's the current code
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1"><h3>Option 1</h3>
<p>Short Description of Option 1</p></label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2"><h3>Option 2</h3>
<p>Short Description of Option 2</p></label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3"><h3>Option 3</h3>
<p>Short Description of Option 3</p></label><br>
</form>
</div>
JSFiddle
EDIT:
I'm aware the JSFiddle doesn't apply the background correctly. The code does operate fine on production.
I've created a wrapper of class .list for each radio item to bind the data.
<div id='results'>
<form>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option 1</h3>
<p class="d-inline">Short Description of Option 1</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option2</h3>
<p class="d-inline">Short Description of Option 2</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
</form>
</div>
CSS code here
.list{
display: flex;
align-items:center;
}
.mb-1{
margin-bottom: 8px;
}
.radio-content{
width:100%;
display:flex;
align-items:center;
justify-content: space-between;
}
Instead of "<" you can use the appropriate icon with the appropriate spacing
label {
background-color: #16a085;
background: linear-gradient(to right, #16a085, #66a99c);
width: 80%;
padding-left: 15px;
padding-top: 10px;
margin-bottom: 3px;
}
form > label > h3 {
margin-bottom: 1px;
}
form > label > p {
margin-top: 1px;
}
form > label h3::after {
content: '\276E';
position: absolute;
right: 0;
padding-right: 20px;
}
input[type=radio] {
display: none;
}
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1">
<h3>Option 1</h3>
<p>Short Description of Option 1</p>
</label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2">
<h3>Option 2</h3>
<p>Short Description of Option 2</p>
</label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3">
<h3>Option 3</h3>
<p>Short Description of Option 3</p>
</label><br>
</form>
</div>
So flexbox is awesome for layouts like these. It performs well and has great browser support (http://caniuse.com/#search=flexbox). IE has some issues but should be able to work around.
ul {
list-style: none;
width: 400px;
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
ul li {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
ul li:last-child {
border-bottom: none;
}
.title {
flex-grow: 1;
padding-top: 4px;
}
.title h3 {
margin: 0;
}
.title p {
font-size: 9px;
color: #aaa;
margin: 1px 0 0 0;
}
.icon {
padding-left: 10px;
width: 40px;
line-height: 50px;
display: inline-block;
}
.toggle-switch {
line-height: 50px;
width: 50px;
display: inline-block;
text-align: center;
}
<ul>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Stops</h3>
<p>Non stop, 1 stop, 2+ stops</p>
</div>
<span class="toggle-switch">^</span>
</li>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Duration</h3>
<p>Any</p>
</div>
<span class="toggle-switch">^</span>
</li>
</ul>
.selected_area {
background-color: #c8c8c8;
padding-top:5px;
height: 330px;
border-radius: 5px;
width:233px;
}
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id=""><div class="label-text fa-lg"><span>ScooterScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span></div>
</label>
<label>
<input type="checkbox" value="motorcycle" id=""><div class="label-text fa-lg"><span>Motorcycle</span></div>
</label>
<label>
<input type="checkbox" value="downtown 250 en" id=""><div class="label-text fa-lg"><span>DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)</span></div>
</label>
</div>
How to make my text next to checkbox not under it?
For this you've to write CSS like:
input[type="checkbox"] {
display: inline-block;
width: 15px;
vertical-align: top;
}
.label-text {
display: inline-block;
width: 200px;
word-break: break-all;
}
Also for side-by-side alignment you should use <span> instead of block elements like <div>.
I've created JSFiddle, please have a look.
try this
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id="">
<span class="label-text fa-lg">
<span>ScooterScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span>
</span>
<br>
</label>
<label>
<input type="checkbox" value="motorcycle" id="">
Motorcycle
<br>
</label>
<label>
<input type="checkbox" value="downtown 250 en" id="">
DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)
</label>
</div>
maybe so?
* {
padding: 0;
margin: 0;
}
.selected_area {
background-color: #c8c8c8;
padding:10px;
height: 330px;
border-radius: 5px;
width:233px;
margin: 20px;
}
.selected_area label {
position: relative;
margin: 10px 0;
display: block;
}
.selected_area .label-text {
position: relative;
padding-left: 24px;
}
.selected_area input {
position: absolute;
top: 2px;
left: 0;
}
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id="">
<div class="label-text fa-lg"><span>ScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span>
</div>
</label>
<label>
<input type="checkbox" value="motorcycle" id="">
<div class="label-text fa-lg"><span>Motorcycle</span>
</div>
</label>
<label>
<input type="checkbox" value="downtown 250 en" id="">
<div class="label-text fa-lg"><span>DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)</span>
</div>
</label>
</div>
.label-text.fa-lg {
display: inline-block;
}
check this link for more help on display property
https://css-tricks.com/almanac/properties/d/display/