how can i make all blocks the same and have 10px margin between them?
The radio button has been changed to a radio label. The problem is that the sizes are different, so the length of the words is different. How can it be done in one size?
You can do something like this:
#radios {
position: relative;
background-color: tomato;
z-index: 5;
width: 363px;
}
input {
display: none;
}
#bckgrnd,
.labels {
width: 120px;
height: 30px;
text-align: center;
display: inline-block;
padding-top: 10px;
margin-right: -3px;
z-index: 2;
cursor: pointer;
outline: 1px solid green;
}
#bckgrnd {
background-color: orange;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
#rad1:checked ~ #bckgrnd {
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
#rad2:checked ~ #bckgrnd {
transform: translateX(120px);
transition: transform 0.5s ease-in-out;
}
#rad3:checked ~ #bckgrnd {
transform: translateX(241px);
transition: transform 0.5s ease-in-out;
}
<div id="radios">
<input id="rad1" type="radio" name="radioBtn" checked>
<label class="labels" for="rad1">First Option</label>
<input id="rad2" type="radio" name="radioBtn">
<label class="labels" for="rad2">Second Option</label>
<input id="rad3" type="radio" name="radioBtn">
<label class="labels" for="rad3">Third Option</label>
<div id="bckgrnd"></div>
</div>
Related
I am developing a website and I want to keep few inputs horizontally.
This is my CSS code
.input-group {
position: relative;
margin: 40px 0 20px;
}
input {
display: inline block;
width: 12%;
background: #EAF6F6;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
border: 0px solid #757575;
border-radius: 5px;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display:block;
width:14%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#-moz-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
This is my HTML code
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
But all inputs are in vertically. As this
But I Expect like this
I tried several ways. But unable to do. How to solve it. I found some bootstrap solutions. But I Do not expect Bootstrap. Expect pure CSS.
Wrap the inputs you wish to be displayed horizontally on the page within a flex group div.
See the css class flex-group in the example snippit below
Css-Tricks on flexbox
Mozilla flexbox
/* display:flex for this class */
.flex-group {
display: flex;
margin: 10px auto; /* set to 10px auto here */
}
.input-group {
position: relative;
margin: auto; /* set margin to auto here */
}
input {
display: inline block;
background: #EAF6F6;
width: 90%; /* set to 80% width */
font-size: 18px;
padding: 10px 10px 10px 5px;
border: 0px solid #757575;
border-radius: 5px;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display: block;
width: 14%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
This is my HTML code
<div class="flex-group"><!--/ added div with class of flex-group => display: flex; /-->
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
</div><!--/ END flex-group /-->
<div class="flex-group"><!--/ start new flex-group class /-->
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
</div><!--/ END flex-group /-->
i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks (input floating label not floating on login form auto completion)and please find the attached image above. (Hello i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks, i really love this project!)
/* login form stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 30px;
}
input {
font-size: 1rem;
padding: 8px 5px 4px 5px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ced4da;
}
input:focus {
outline: none;
}
/* LABEL ======================================= */
.labe {
color: #999;
font-size: 1rem;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input:focus ~ .labe, input:valid ~ .labe {
top: -20px;
font-size: 14px;
color: #fb9f18;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #fb9f18;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
<form class="text-center">
<div class="group">
<input type="text" id="eMail" [(ngModel)]="loginEmail" #eMail="ngModel" name="loginEmail"
autocomplete="off" required >
<span class="bar"></span>
<label class="labe " for="eMail"><i class="far fa-user mr-2"></i> Email or Username</label>
</div>
<div class="group">
<input [type]="view ? 'text' : 'password'" type="password" id="password" [(ngModel)]="loginPassword"
autocomplete="off"
#password="ngModel" name="loginpwd" required>
<span class="bar"></span>
<label class="labe" for="password"><i class="fa fa-key mr-2"></i> Password</label>
<a class="hiddenPass" (click)='view = !view'><i class="far"
[ngClass]="{'fa-eye': view, 'fa-eye-slash':!view}"></i></a>
</div>
<div *ngIf="error" class=" alert alert-danger alert-dismissible" style="font-size: .8rem;"><i
class="fas fa-exclamation-triangle mx-1"></i>{{error}}</div>
<div class="d-flex justify-content-around">
<div class="boxes">
<input type="checkbox" class="asi" id="box-1">
<label for="box-1">Remember me</label>
</div>
<div>
<a class="fpwd" routerLink="/recoverpwd"> Forgot password?</a>
</div>
</div>
<div class=" mt-0 mb-0">
<button class="login-button" type="submit btn"
(click)="Login(loginEmail,loginPassword)">Sign in
</button>
<i *ngIf="loading" class="fas fa-spinner fa-pulse" style="color: #f1bf18; font-size: 20px;"></i>
</div>
<p class="awd">Don't have an Account?
<a class="fpwd" routerLink="/register">Register</a>
</p>
</form>
This might help you for Chrome (-webkit-autofill)
input:focus ~ .labe,
input:valid ~ .labe,
input:-webkit-autofill ~ .labe {
top: -20px;
font-size: 14px;
color: #fb9f18;
}
However, I think the idea here would be that once the browser has auto filled your fields, you'd fire an onChange event, which would update your model, in turn applying a class to say the field has a value.
I don't know enough about Angular to show example code of how that'd work.
I want to add an input form to an HTML table cell when a checkbox is selected.
When I add some form of text field or number field to the table cell to create a form, the text box doesn't show. only the text of my label shows.
<td>
<label class="collapsible">
<input type="checkbox" />
<span class="collapser">Edit</span>
<span class="arrow">></span>
<div class="collapsed">
<form method="post">
<label for="pwd">Hello World</label><br>
<input type="number" min="1" step="1" class="form-control" id="pwd" name=min_qty>
</form></div></label></td>
My Css code as well:
.collapsible {
display: block;
margin-bottom: 1rem;
}
.collapsible input {
position: absolute;
left: -9999px;
}
.collapsible input:focus ~ .collapser {
border-color: grey;
}
.collapsible .collapser {
cursor: pointer;
border: 1px transparent dotted;
}
.collapsible .arrow {
float: right;
margin-left: 0.5em;
display: inline-block;
transform: rotate(90deg);
transition: transform 0.25s ease-out;
}
.collapsible input:checked ~ .arrow,
.collapsible input:checked ~ .collapser .arrow {
transform: rotate(270deg);
}
.collapsible .collapsed {
font-size: 0;
margin: 0;
opacity: 0;
padding: 0;
/* fade out, then shrink */
transition: opacity 0.25s, margin 0.5s 0.25s, font-size 0.5s 0.25s, padding 0.5s 0.25s;
}
.collapsible input:checked ~ .collapsed {
font-size: 12px;
opacity: 1;
height: auto;
padding: 5px 0;
/* grow, then fade in */
transition: margin 0.25s, padding 0.25s, font-size 0.25s, opacity 0.5s 0.25s;
}
My table output example
I figured it out.
My CSS was affecting all of my inputs, not just my check boxes.
Changed this:
}
.collapsible input {
position: absolute;
left: -9999px;
}
to this:
.collapsible input[type="checkbox"] {
position: absolute;
display: none;
}
Ey I have an accordion menu, I want to change the glyph icons, and I found some answers to people asking the same thing but no answer I found worked on mine. Probably because I dont know where to apply the code.
My menu in a Jsfiddle:
http://jsfiddle.net/3wt0ehcj/
The glyph icons I try to get in:
https://codepen.io/tofanelli/pen/waadRY
The code I need to put somewhere:
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
If there is another or easier way to to this I'm all ears! :)
You can solve this using :not(checked) and checked CSS pseudo-classes.
not()
checked
Remove this part
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
Use the glyphicon source code and then use this code.
/* when input is checked */
.accordion-bral input:checked ~ .ac-label i:after {
content: "\e114"
}
/* when input is not checked */
.accordion-bral input:not(checked) ~ .ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal; /* change font style too */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey;
}
This is the working fiddle
http://jsfiddle.net/7zsbumax/2/
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #b70000;
color: white;
}
.accordion-bral input+.ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked+.ac-label,
.accordion-bral input:checked+.ac-label:active {
background-color: #b70000;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 20px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked~.article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked~.article.ac-content {
height: auto;
}
.accordion-bral i {
text-decoration: none;
margin-top: 16px;
right: 0;
}
.accordion-bral input:checked~.ac-label i:after {
content: "\e114"
}
.accordion-bral input:not(checked)~.ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal;
font-family: 'Glyphicons Halflings';
/* essential for enabling glyphicon */
content: "\e114";
/* adjust as needed, taken from bootstrap.css */
float: right;
/* adjust as needed */
color: grey;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th {
text-align: left;
}
#media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div class="accordion-bral">
<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
<div class="article ac-content">
<h1 style="position: absolute; margin-left:10px;color:#b70000;">HOUTSOORT</h1>
<div class="flex-container">
<div class="card">
<img src="maxopdracht2/eiken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Eiken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/beuken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Beuken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/grenen-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Grenen</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/maple-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Maple</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/merbau-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Merbau</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/onbekend-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Overig/onbekend</label>
</div>
</div>
</div>
</div>
</div>
<!-- accordion item 1 -- end -->
<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">responsive accordion<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 2 -- end -->
<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->
<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">Forms are cool<i></i></label>
<div class="article ac-content">
</div>
</div>
</div>
Update
If you want a little animation use this:
.accordion-bral input:checked ~ .ac-label i:after {
/* transform: rotate(90deg); */
transform: rotate(-270deg);
}
.accordion-bral i:after {
content: "\e080";
font-style: normal;
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
float: right; /* adjust as needed */
color: grey;
transition: 1s ease-out;
}
http://jsfiddle.net/2eLb3ju7/
You need to adjust this part of the code:
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
To something like this:
.accordion-bral input:checked ~ .ac-label i:before {
content: "+"; /*Icon for the opened state*/
}
.accordion-bral i:before {
content: "-"; /*Icon for the closed state*/
}
Also remove the CSS related to the :after element.
Full code with Font Awesome as example:
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #b70000;
color: white;
}
.accordion-bral input + .ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked + .ac-label,
.accordion-bral input:checked + .ac-label:active {
background-color: #b70000;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 20px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked ~ .article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked ~ .article.ac-content {
height: auto;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 16px;
right: 0;
font-style: initial;
}
.accordion-bral input:checked ~ .ac-label i:before {
content: "\f078";
}
.accordion-bral i:before {
content: "\f054";
position: absolute;
top:-15px;
font-family:"Font Awesome 5 Free";
font-weight:900;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th{
text-align: left;
}
#media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<div class="accordion-bral">
<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
<div class="article ac-content">
<h1 style="position: absolute; margin-left:10px;color:#b70000;">HOUTSOORT</h1>
<div class="flex-container">
<div class="card">
<img src="maxopdracht2/eiken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Eiken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/beuken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Beuken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/grenen-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Grenen</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/maple-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Maple</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/merbau-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Merbau</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/onbekend-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Overig/onbekend</label>
</div>
</div>
</div>
</div>
</div>
<!-- accordion item 1 -- end -->
<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">responsive accordion<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 2 -- end -->
<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->
<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">Forms are cool<i></i></label>
<div class="article ac-content">
</div>
</div>
</div>
First step:
Did you include the link for Gryphicons in your HTML file? You need to write the below link inside the <head> tag. Usually after the <meta> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Second step:
Of course the tag should contain something like:
<p class="panel-heading"></p>
Third step: your CSS code should be inside the <style> tag. (if not in a .css file)
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Currently the image slider is fix width a radio button is position by line-height. If the image width is switch to 100%, how do The radio button remain at the bottom of the image in responsive layout?
CSS
.slideshow{
width:640px;
height:360px;
max-height:760px;
position:relative;
text-align:center;.slideshow {
width: 640px;
height: 360px;
max-height: 760px;
position: relative;
text-align: center;
line-height: 75px;
padding-bottom: 30px;
}
.slideshow input[type="radio"] {
font-size: 0.75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
top: 0;
bottom: 0;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: 0.3s ease-out background, 0.3s ease-out transform;
}
.slideshow input[type="radio"]:checked {
background: #999;
outline: 0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slideshow .slideshow-item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 0;
opacity: 0;
transition: 0.3s ease-out opacity;
}
.slideshow .slideshow-item label {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slideshow .slideshow-item label:after {
display: block;
content: "\25B6";
font-size: 2em;
color: #fff;
position: absolute;
top: 50%;
right: 10px;
margin-top: -0.5em;
}
.slideshow .slideshow-item label.previous {
left: 0;
display: block;
}
.slideshow .slideshow-item label.previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;.slideshow {
width: 640px;
height: 360px;
max-height: 760px;
position: relative;
text-align: center;
line-height: 75px;
padding-bottom: 30px;
}
.slideshow input[type="radio"] {
font-size: 0.75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
top: 0;
bottom: 0;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: 0.3s ease-out background, 0.3s ease-out transform;
}
.slideshow input[type="radio"]:checked {
background: #999;
outline: 0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slideshow .slideshow-item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 0;
opacity: 0;
transition: 0.3s ease-out opacity;
}
.slideshow .slideshow-item label {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slideshow .slideshow-item label:after {
display: block;
content: "\25B6";
font-size: 2em;
color: #fff;
position: absolute;
top: 50%;
right: 10px;
margin-top: -0.5em;
}
.slideshow .slideshow-item label.previous {
left: 0;
display: block;
}
.slideshow .slideshow-item label.previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;
}
.slideshow .slideshow-item label.next {
left: 50%;
display: block;
}
.slideshow input[type="radio"]:checked + .slideshow-item {
opacity: 1;
}
}
.slideshow .slideshow-item label.next {
left: 50%;
display: block;
}
.slideshow input[type="radio"]:checked + .slideshow-item {
opacity: 1;
}
line-height:75px;padding-bottom:30px}.slideshow input[type=radio]{
font-size:.75em;
width:1em;height:1em;
display:inline-block;
position:relative;
top:0;
bottom:0;
z-index:99;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ccc;border-radius:1em;transition:.3s ease-out background,.3s ease-out transform}
.slideshow input[type=radio]:checked{
background:#999;outline:0;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);transform:scale(1.3)}.slideshow .slideshow-item{width:640px;height:360px;line-height:1.5;position:absolute;top:0;opacity:0;transition:.3s ease-out opacity}.slideshow .slideshow-item label{position:absolute;top:0;bottom:0;width:50%;display:none;z-index:88;cursor:pointer;color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slideshow .slideshow-item label:after{display:block;content:'\25B6';font-size:2em;color:#fff;position:absolute;top:50%;right:10px;margin-top:-.5em}.slideshow .slideshow-item label.previous{left:0;display:block}.slideshow .slideshow-item label.previous:after{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:10px}.slideshow .slideshow-item label.next{left:50%;display:block}.slideshow input[type=radio]:checked+.slideshow-item{opacity:1}
HTML
<div class="page">
<h1>Pure CSS slideshow</h1>
<p>A proof of concept to have an image slideshow without javascript</p>
<div class="slideshow">
<input type="radio" name="slide" id="item-1" checked="checked" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/1" />
<label for="item-3" class="previous">Go to slide 3</label>
<label for="item-2" class="next">Go to slide 2</label>
</div>
<input type="radio" name="slide" id="item-2" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/2" />
<label for="item-1" class="previous">Go to slide 1</label>
<label for="item-3" class="next">Go to slide 3</label>
</div>
<input type="radio" name="slide" id="item-3" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/3" />
<label for="item-2" class="previous">Go to slide 2</label>
<label for="item-1" class="next">Go to slide 1</label>
</div>
</div>
<p>By #joggink | View on github</p>
</div>
Link Here
if your slideshow height is fixed using can use CSS translateY. codepen
.slideshow{
width:100%;
height:360px;
position:relative;
text-align:center;
padding-bottom:30px;
background-color:green;
}
.slideshow input[type=radio]{
font-size:.75em;
width:1em;
height:1em;
display:inline-block;
position:relative;
z-index:99;
transform: translateY(360px);
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background:#ccc;
border-radius:1em;
transition:.3s ease-out background,.3s ease-out transform
}
.slideshow input[type=radio]:checked{
background:#999;outline:0;transform: translateY(360px) scale(1.3)}
.slideshow-item{
width:100%;
height:360px;
line-height:1.5;
position:absolute;
top:0;
opacity:0;
transition:.3s ease-out opacity}
.slideshow .slideshow-item label{
position:absolute;
top:0;
bottom:0;
width:50%;
display:none;
z-index:88;
cursor:pointer;
color:transparent;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none-moz-user-select:none;-ms-user-select:none;user-select:none}.slideshow .slideshow-item label:after{display:block;content:'\25B6';font-size:2em;color:#fff;position:absolute;top:50%;right:10px;margin-top:-.5em}.slideshow .slideshow-item label.previous{left:0;display:block}.slideshow .slideshow-item label.previous:after{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:10px}.slideshow .slideshow-item label.next{left:50%;display:block}.slideshow input[type=radio]:checked+.slideshow-item{opacity:1}
<div class="page">
<div class="slideshow">
<input type="radio" name="slide" id="item-1" checked="checked" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/1" />
<label for="item-3" class="previous">Go to slide 3</label>
<label for="item-2" class="next">Go to slide 2</label>
</div>
<input type="radio" name="slide" id="item-2" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/2" />
<label for="item-1" class="previous">Go to slide 1</label>
<label for="item-3" class="next">Go to slide 3</label>
</div>
<input type="radio" name="slide" id="item-3" />
<div class="slideshow-item">
<img src="http://lorempixel.com/640/360/sports/3" />
<label for="item-2" class="previous">Go to slide 2</label>
<label for="item-1" class="next">Go to slide 1</label>
</div>
</div>
<p>By #joggink | View on github</p>
</div>