The Quiz is perfectly showing in firefox and Chrome, just Safari seems to have some issues. It instantly shows the last test instead of the first like chrome and firefox are doing. What am I doing wrong. (I am using Safari Version 8.0.2 (10600.2.5)).
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0); }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>A simple Quiz in pure CSS</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
play again
</div>
</div>
</div>
</div>
</body>
</html>
The Problem is that webkit doesnt understand the transition and transform attributes without vendor prefixes. Copy every line of transition and transform and replace the duplicate with -webkit-transision and -webkit- transform.
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
-webkit-transform: translate3d(150%, 0, 0);
-webkit-transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>A simple Quiz in pure CSS</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
play again
</div>
</div>
</div>
</div>
</body>
</html>
P.S. The snippet above doesn't run correctly in the preview box because some of stackoverflows css is interfering. It does however run correctly in the full page preview.
Related
I'm trying to make this tribute page and since the box (where the form fields are located) I was making keeps on overlapping the title above, I tried to make the box responsive. However, the background-color disappeared after I've done it, and I don't know how to go from there. This is the HTML code by the way.
<body>
<div id="maintitle-div"><h1 id="maintitle" class="maintitle">atrovska</h1></div>
<div class="box">
<div class="content">
<h1 id="title">💬 Tell us how we're doing! 💬</h1>
<p id="description"> Your feedback matters to us and rest assured we will use this to improve our services even further. </p>
<form id="survey-form">
<label id="name-label">
Name <br> <input type="text" id="name" placeholder="Enter your Name" required> </label><br>
<label id="email-label">
Email <br> <input type="email" id="email" placeholder="Enter your Email" required></label>
<label id="number-label">
<input type="number" id="number" placeholder="Enter your phone number" required max="1" min="5">Number</label>
<p>What services did you avail?</p>
<select name="services" id="dropdown">
<option value="Internet">Internet </option>
<option value="Data">Data</option>
<option value="Post-paid">Post-Paid</option> </select><br>
<p> Please select your service provider.</p>
<input type="radio" name="provider" value="globe">Globe
<input type="radio" name="provider" value="globe">Globe
<input type="radio" name="provider" value="globe">Globe
<p> Please select your service provider.</p>
<input type="checkbox" name="provider" value="globe">Globe
<input type="checkbox" name="provider" value="globe">Globe
<input type="checkbox" name="provider" value="globe">Globe
<textarea></textarea>
<button type="submit" id="submit">Submit</button>
</form>
</div>
</div></body>
And this is the CSS.
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root {
--color-darkBlue: rgb(66, 7, 188);
}
body {
background-image: url(https://i.pinimg.com/originals/6d/25/f2/6d25f2bc9f8c59dc9d5fbab6809126f8.jpg);
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#maintitle {
font-family: 'Press Start 2P', cursive;
color: rgb(255, 201, 14);
margin-top: 5px;
font-size: 48px;
margin: 30px 0 30px auto;
text-align: center;
}
.header {
padding: 0 0.625rem;
margin-bottom: 1.875rem;
}
.box {
border-radius: 15px;
position: relative;
width: 50%;
margin: 0 auto;
background-color: white;
}
.box::after {
content: "";
display: block;
padding-bottom; 100%;
width: 100%;
height: 100%;
background-color: white;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
}
#title {
font-family: 'Fredoka One', cursive;
color: var(--color-darkBlue);
margin-top: 5px;
font-size: 24px;
margin-bottom: 2px;
text-align: center;
}
p {
font-family: 'Open Sans', sans-serif;
color: rgb(66, 7, 188);
font-size: 8px;
}
#description {
font-weight: 900;
font-size: 14px;
margin-top: 10px;
}
#survey-form {
margin: 5px 0 5px auto;
}
input {
margin: 6px 0 5px auto;
}
#survey-form {
font-family: 'Open Sans', sans-serif;
color: black;
font-size: 11px;
}
You have a CSS syntax mistake in your code.
.box::after {
content: "";
display: block;
padding-bottom; 100%;
width: 100%;
height: 100%;
background-color: white;
}
Should be:
.box::after {
content: "";
display: block;
padding-bottom: 100%;
width: 100%;
height: 100%;
background-color: white;
}
End then giving .content class to background-color works:
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
Will paint content background to red.
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 90%;
background-color:#000;
border: .0625rem solid #ccc;
position:absolute;
top:0;
bottom:0;
left:300px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I have divided the Signup form into two parts, left part is for displaying some content and right side is for displaying Signup form elements like Username, email, password and repeat password.
Now i want to move the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
Tried Creating all but having issue with(CSS PART) moving the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
you can use these code
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem 2rem 2.5rem 3rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 100%;
background-color: #000;
border: .0625rem solid #ccc;
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 2px);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I'm using the following CSS to display two elements compactly.
.trigger,
/* to hide the checkbox and for more general use */
.gone,
.hidden {
display: none;
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
z-index: -999999;
top: -999999px;
margin: -1px;
padding: 0;
border: 0;
height: 1px;
width: 1px;
min-height: 0;
min-width: 0
}
label {
cursor: pointer
}
.fullverbtable {
display: none
}
.trigger:checked~.fullverbtable {
display: block
}
label {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
font-weight: normal;
font-style: normal;
color: white;
background-color: #ff4b54;
border-radius: 5px;
padding: 0px 5px;
text-decoration: none;
}
.verb {
display: inline;
}
<div class="verb">
<label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
<input class="trigger" id="aimer_larousse_ef_active_10" type="checkbox">
<div class="fullverbtable">
<link href="larousse_ef.css" rel="stylesheet" type="text/css">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
<div class="verb">
<label for="aimer_larousse_ef_passive10">Conjugaison (voix passive)</label>
<input class="trigger" id="aimer_larousse_ef_passive10" type="checkbox">
<div class="fullverbtable">
<link href="larousse_ef.css" rel="stylesheet" type="text/css">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
When expanding both 2 elements, the display is very fine.
I hope the result when expanding only the first element as
Could you please explain on how to do so?
I thought I understood your question if I'm right you want to create something like accordion by using checkboxes but the checkboxes can all be check and even the y share name that's I used the radio
to do so, and I don't want go on you with an invalid HTML that's why you'll find I edit too much but it's simple you'll find what you want
.trigger {
display: none;
}
label {
cursor: pointer
}
.fullverbtable_1,
.fullverbtable_2 {
display: none;
}
input[id="aimer_larousse_ef_active_10"]:checked~.fullverbtable_1,
input[id="aimer_larousse_ef_passive_10"]:checked~.fullverbtable_2 {
display: flex;
}
label {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
color: white;
background-color: #ff4b54;
border-radius: 5px;
padding: 0px 5px;
}
<div class="inputs">
<label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
<input type="radio" id="aimer_larousse_ef_active_10" name="trigger" class="trigger">
<label for="aimer_larousse_ef_passive_10">Conjugaison (voix passive)</label>
<input type="radio" id="aimer_larousse_ef_passive_10" name="trigger" class="trigger">
<div class="fullverbtable_1">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="fullverbtable_2">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
<div class="para">
</div>
If you want to expand all of them at the same time you can simply replace radio type to checkbox
.trigger {
display: none;
}
label {
cursor: pointer
}
.fullverbtable_1,
.fullverbtable_2 {
display: none;
}
input[id="aimer_larousse_ef_active_10"]:checked~.fullverbtable_1,
input[id="aimer_larousse_ef_passive_10"]:checked~.fullverbtable_2 {
display: flex;
}
label {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
color: white;
background-color: #ff4b54;
border-radius: 5px;
padding: 0px 5px;
}
<div class="inputs">
<label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
<input type="checkbox" id="aimer_larousse_ef_active_10" name="trigger" class="trigger">
<label for="aimer_larousse_ef_passive_10">Conjugaison (voix passive)</label>
<input type="checkbox" id="aimer_larousse_ef_passive_10" name="trigger" class="trigger">
<div class="fullverbtable_1">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="fullverbtable_2">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
<div class="para">
</div>
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I've been asked to fix a problem that I don't understand. Can someone be kind enough to have a look at this fiddle?
When shrinking the width of the output pane so that the last question is forced to multi line, the accompanied span .checkmark is no longer round but elliptical.
body {
background-color: white;
color: black;
font-weight: 400;
font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
margin: 0px;
}
.header-container {
padding: 1px;
text-align: left;
color: white;
}
.header-txt {
font-size: 15px;
margin: 5px 11px 4px 11px;
display: inline-block;
}
/* Format Question text */
.question-container {
flex: 1 1 auto;
margin: auto;
display: flex;
padding-bottom: 5px;
}
.question-text {
font-size: 17px;
font-weight: 600;
line-height: 22px;
text-align: left;
margin-bottom: 3px;
font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}
/* Format pages */
.question-page {
font-size: 12px;
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
}
/* Question options format */
.option-container {
display: flex;
position: relative;
padding-left: 0px;
margin-bottom: 0px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option-container input {
position: absolute;
opacity: 0;
}
.checkmark {
position: relative;
height: 15px;
width: 15px;
background-color: #D3D3D3;
border-radius: 50%;
margin-top: auto;
margin-bottom: auto;
margin-right: 15px;
}
.option-container:hover input~.checkmark {
background-color: #A9A9A9;
}
.option-container:hover {
background-color: #F8F8F8;
}
.option-container input:checked~.checkmark {
background-color: #dd2a30;
}
<div id="survey">
<div class="header-container">
<span class="header-txt">A question for you...</span>
</div>
<div id="question-body" class="modal-body">
<div id="q1" class="question-page">
<div class="question-container">
<span class="question-text">What is your relationship <br> with [brand]?</span>
</div>
<div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
<input class="question-option" type="radio" name="q1" value="1">
</div>
<div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
<input class="question-option" type="radio" name="q1" value="2">
</div>
<div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
<input class="question-option" type="radio" name="q1" value="3">
</div>
<div class="option-container"><span class="checkmark"></span>My most preferred [product category]
<input class="question-option" type="radio" name="q1" value="4">
</div>
<div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
<input class="question-option" type="radio" name="q1" value="5">
</div>
</div>
</div>
</div>
That's because when the content is more that the space available, by default the flexbox items tries to shrink to the space available - add flex-shrink: 0 to checkmark - see demo below-
body {
background-color: white;
color: black;
font-weight: 400;
font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
margin: 0px;
}
.header-container {
padding: 1px;
text-align: left;
color: white;
}
.header-txt {
font-size: 15px;
margin: 5px 11px 4px 11px;
display: inline-block;
}
/* Format Question text */
.question-container {
flex: 1 1 auto;
margin: auto;
display: flex;
padding-bottom: 5px;
}
.question-text {
font-size: 17px;
font-weight: 600;
line-height: 22px;
text-align: left;
margin-bottom: 3px;
font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}
/* Format pages */
.question-page {
font-size: 12px;
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
}
/* Question options format */
.option-container {
display: flex;
position: relative;
padding-left: 0px;
margin-bottom: 0px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option-container input {
position: absolute;
opacity: 0;
}
.checkmark {
flex-shrink: 0; /* ADDED */
position: relative;
height: 15px;
width: 15px;
background-color: #D3D3D3;
border-radius: 50%;
margin-top: auto;
margin-bottom: auto;
margin-right: 15px;
}
.option-container:hover input~.checkmark {
background-color: #A9A9A9;
}
.option-container:hover {
background-color: #F8F8F8;
}
.option-container input:checked~.checkmark {
background-color: #dd2a30;
}
<div id="survey">
<div class="header-container">
<span class="header-txt">A question for you...</span>
</div>
<div id="question-body" class="modal-body">
<div id="q1" class="question-page">
<div class="question-container">
<span class="question-text">What is your relationship <br> with [brand]?</span>
</div>
<div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
<input class="question-option" type="radio" name="q1" value="1">
</div>
<div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
<input class="question-option" type="radio" name="q1" value="2">
</div>
<div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
<input class="question-option" type="radio" name="q1" value="3">
</div>
<div class="option-container"><span class="checkmark"></span>My most preferred [product category]
<input class="question-option" type="radio" name="q1" value="4">
</div>
<div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
<input class="question-option" type="radio" name="q1" value="5">
</div>
</div>
</div>
</div>
As you can see, there are 6 input boxes. I want to know how to divide them into two groups: 3 to the left and 3 to the right.
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: dimgrey;
position: absolute;
top: 25%;
left: 0;
width: 100%;
height: 1000px;
margin-top: -200px;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #807e80;
}
form button {
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #3a3c3d;
border-radius: 4px;
width: 250px;
cursor: pointer;
font-size: 22px;
}
form button:hover {
background-color: #f5f7f9;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="name">
<input type="contact" placeholder="contact number">
<input type="add" placeholder="Country">
<input type="Bday" placeholder="Birthday">
<input type="Age" placeholder="Age">
<input type="pin" placeholder="Pin number">
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>
How about something like this? Just a simple solution.
<form class="form" method='post'>
<div style="width:50%;float:left;">
<input type="text" name='name' placeholder="name">
<input type="tel" name='contact' placeholder="contact number">
<input type="text" name='country' placeholder="Country">
</div>
<div style="width:50%;float:left;">
<input type="date" name='bday' placeholder="Birthday">
<input type="number" name='age' placeholder="Age">
<input type="number" name='pin' placeholder="Pin number">
</div>
<button type="submit" id="sign">Sign-up</button>
</form>
I've changed the input types to valid types. You gave pin, bday etc which are not valid. You can go through this link for more information about this.
Update your HTML to use Tables:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="body register.css"/>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<table>
<tr><td><input type="text" placeholder="name"></td>
<td><input type="contact" placeholder="contact number"></td>
</tr>
<tr><td><input type="add" placeholder="Country"></td>
<td><input type="Bday" placeholder="Birthday"></td>
</tr>
<tr>
<td><input type="Age" placeholder="Age"></td>
<td>
<input type="pin" placeholder="Pin number"></td>
</tr>
</table>
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>
See this CodePen
This would be my solution using flexbox, as in the future you may have to add more inputs as well as serve it over a range of devices.
You can change the submit button as required.
.form{
display:flex;
border:1px solid black;
flex-wrap:wrap;
justify-content:space-between;
}
.form > *{
flex:1;
flex-basis:33.33%;
}
input{
display:block;
}
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="name">
<input type="contact" placeholder="contact number">
<input type="text" placeholder="Country">
<input type="text" placeholder="Birthday">
<input type="text" placeholder="Age">
<input type="text" placeholder="Pin number">
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>