I need to beautifully design the "switches". Found an example on one site. How can I do the same? Please give a link to a similar example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Switches</title>
</head>
<body>
<form>
<p><input name="tech" type="radio" value="computer" checked>compute</p>
<p><input name="tech" type="radio" value="xbox">xbox</p>
<p><input name="tech" type="radio" value="playstation">playstation</p>
<p><input name="tech" type="radio" value="Game">Game</p>
<p><input name="tech" type="radio" value="TV">TV</p>
</form>
</body>
</html>
Here is an example of what I want to get.
You could do it like this.
You hide the radio circle but if you select it (by the label) you change the style of the label.
input{
display: none;
}
input + label{
font-size: 14px;
border: #9c94bb 1px solid;
width: 130px;
background-color: #ffffff;
transition: background-color .3s;
color: #000000;
text-align: center;
padding: 7px 0;
display: inline-block;
margin-right: 10px;
}
input:checked + label{
background: #ece8ff;
}
form{
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Switches</title>
</head>
<body>
<form>
<p>
<input name="tech" type="radio" value="computer" id="computer" checked>
<label for="computer">computer</label>
</p>
<p>
<input name="tech" type="radio" value="xbox" id="xbox">
<label for="xbox">xbox</label>
</p>
<p>
<input name="tech" type="radio" value="playstation" id="playstation">
<label for="playstation">playstation</label>
</p>
<p>
<input name="tech" type="radio" value="Game" id="game">
<label for="game">Game</label>
</p>
<p>
<input name="tech" type="radio" value="TV" id="tv">
<label for="tv">TV</label>
</p>
</form>
</body>
</html>
Related
Using my iPhone to preview a webpage I'm working on, I notice that whenever I click an input, I see a brief flash of grey behind it.
I've stripped out all the CSS but the grey flashing remains. It's not visible on desktop Safari, only mobile Safari.
What is causing it? How do I stop it from happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why do the inputs flash?</title>
<style type="text/css">
input {
display: block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
</style>
</head>
<body>
<input type="radio" name="mode" id="mode1" value="mode1">
<label for="mode1">Mode 1</label>
<input type="radio" name="mode" id="mode2" value="mode2">
<label for="mode2">Mode 2</label>
<input type="radio" name="mode" id="mode3" value="mode3">
<label for="mode3">Mode 3</label>
<label for="hello">
<input checked type="checkbox" id="hello">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Check me</span>
</label>
<form action="">
<label for="text-input">
Enter text
<input type="text">
</label>
<label for="email-iput">
Enter email here
<input type="email">
</label>
</form>
</body>
</html>
I googled the American spelling gray and found an answer on CSS-tricks.
-webkit-tap-highlight-color: rgba(0,0,0,0);
And then to allow :active styles to work in your CSS on a page in Mobile Safari:
document.addEventListener("touchstart", function(){}, true);
Edit
Actually, I only need -webkit-tap-highlight-color: rgba(0,0,0,0); to override the grey flash.
Use display: inline-block; instead of display: block;
Tested in the newest Safari Version in IOS 15
Here's an example:
/* Ignore this */
* {
margin: 0;
padding: 0;
}
/* Width part */
#first {
display: block;
background: red;
}
#second {
display: inline-block;
background: red;
}
<p id="first">This has a 100% width</p>
<br>
<p id="second">This text has a background color based on the texts lenght</p>
So change this:
input {
display: block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
to this:
input {
display: inline-block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
or just this:
input {
display: inline-block;
}
<input type="checkbox">
Radio and checkbox elements should not use width property in the sense you are using it. It should be fixed element size whatever it is. If you want it to take up an entire row, you should wrap it in a div. As bellow.
However, there might be a CSS way to manage the color via the use of :focus selector. But I cannot test it, since I don't have access to iPhone.
input:focus {
background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why do the inputs flash?</title>
<style type="text/css">
input {
display: block;
border-width: 0 0 1px 0;
border-radius: 0px;
}
</style>
</head>
<body>
<div class="i-should-be-full-width">
<input type="radio" name="mode" id="mode1" value="mode1">
</div>
<label for="mode1">Mode 1</label>
<input type="radio" name="mode" id="mode2" value="mode2">
<label for="mode2">Mode 2</label>
<input type="radio" name="mode" id="mode3" value="mode3">
<label for="mode3">Mode 3</label>
<label for="hello">
<input checked type="checkbox" id="hello">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Check me</span>
</label>
<form action="">
<label for="text-input">
Enter text
<input type="text">
</label>
<label for="email-iput">
Enter email here
<input type="email">
</label>
</form>
</body>
</html>
I'm just just now starting out and this is my first project. No matter what I do my image won't show (only the top header image will), on the web-page it will show as broken or won't show at all.
I've tried:
using a relative and absolute path
different types of syntax (../../ - ../ - /)
commenting out some css to see if that would change things
using a completely different image
adding an image just always seemed so easy to me and I don't understand why this simple task can't be preformed. would love the help.
<!DOCTYPE html>
<html>
<head>
<title>Knitting Submission Form</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:100,200,300" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
<!-- resize icon or enter image -->
<header>
<h1>KNIT HUB</h1>
<br>
<br>
<h2>Knitting Submission Form</h2>
<h2>Share and Join Our Community</h2>
</header>
<img src="https://unsplash.com/photos/8uTqI_KpC_Q">
<img src="Knitting-Submission-Form/resources/images/gray yarn basket.jpeg">
<div>
<p>Name:<input type="text" placeholder="First Name/Nickname"></p>
<label for="age" class="age">Age:</label>
<select id="age-dropdown">
<option value="" disable selected hidden>...Choose</option>
<option value="1">12-19</option>
<option value="2">20-29</option>
<option value="3">30-39</option>
<option value="4">40-49</option>
<option value="5">50=59</option>
<option value="6">60-69</option>
<option value="7">70-79</option>
<option value="8">80+</option>
</select>
<br>
<p>How much do you typically spend a year on knitting materials?</p>
<span class="currencyinput">$<input type="text" name="currency"></span>
</div>
<div>
<h3>What's Your Knitting Skill Level?</h3>
<input type="checkbox" class="skill-level" name="skill-level" value="interested">Interested, I like yarn and
needles<br>
<input type="checkbox" class="skill-level" name="skill-level" value="beginner">Beginner, I know my knits and
purls<br>
<input type="checkbox" class="skill-level" name="skill-level" value="intermediate">Intermediate, Knitting is my
happy place<br>
<input type="checkbox" class="skill-level" name="skill-level" value="pro">Pro, I can dress myself in head to toe
knits<br>
<br>
</div>
<!-- find out "for" attribute-->
<div>
<form>
<h3>How many years have you been knitting?</h3>
<input type="radio" name="how-long" value="not-started">
<label for="">I haven't started yet</label><br>
<input type="radio" name="how-long" value="getting-started">
<label for="">Just getting started</label><br>
<input type="radio" name="how-long" value="1-3-years">
<label for="">1-3 years</label><br>
<input type="radio" name="how-long" value="4-7-years">
<label for="">4-7 years</label><br>
<input type="radio" name="how-long" value="8-14-years">
<label for="">8-14 years</label><br>
<input type="radio" name="how-long" value="15+">
<label for="age3">15+ years</label><br><br>
</div>
<br>
<div>
<h3>How many times a week do you knit?</h3>
<input type="radio" name="weekly" value="0-days">
<label for="">hey, i'm not there yet</label><br>
<input type="radio" name="weekly" value="1-2-days">
<label for="">1-2 days</label><br>
<input type="radio" name="weekly" value="3-4-days">
<label for="">3-4 days</label><br>
<input type="radio" name="weekly" value="5-6-days">
<label for="">5-6 days</label><br>
<input type="radio" name="weekly" value="60">
<label for="age2">7 days, i knit in my sleep</label><br>
</form>
</div>
<br>
<div>
<h3 class="favorite-things">What are your favorite things to knit?</h3>
<input type="checkbox" class="checkbox-inline" name="favorites" value="hats">Hats<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="scarves">Scarves<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="shawls">Shawls<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="blankets">Blankets<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="gloves">Gloves<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="sweaters">Sweaters<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="socks">Socks<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="other">Other<br>
</div>
<div>
<h3>What's your favorite thing about knitting?</h3>
<form action="/action_page.php">
<textarea name="message" rows="12" cols="40">Be creative as you like.</textarea>
</form>
</div>
<div>
<h3>Upload a photo of your latest creation below:</h3>
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
<br>
<br>
<br>
<button type="submit">Share</button>
</form>
</div>
</body>
</html>
body {
padding-bottom: 100px;
background-color: rgba(255, 99, 71, 0.1);
margin-bottom: auto;
background-repeat: no-repeat;
}
header {
background: url("../images/pink heart yarn.jpeg");
width: 100%;
height: 670px;
margin-right: 400px;
text-align: center;
padding: 5px;
}
h1 {
font-family: Montserrat;
font-size: 90px;
font-weight: 200;
letter-spacing: .06em;
border: 1px solid black;
display: inline-block;
}
h2 {
font-family: "Poiret One";
font-weight: 200;
}
div {
font-family: lora;
padding-left: 20px;
}
}
.age {
display: inline-block;
margin: -1px;
}
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}
URLs shouldn't contain literal spaces. Change the image file name to not have spaces (such as gray_yarn+basket.jpeg) or update the code to encode the spaces (gray%20yarn%20basket.jpeg).
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="utf-8">
<title> Contact page </title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li> Index </li>
<li> Learning Log </li>
<li> Contact </li>
</ul>
</nav>
</header>
<h1> Contact page </h1>
<form>
<fieldset>
<legend>Contact Information</legend>
<p><label >first_name*: <input type="text" name="first_name*" required></label></p>
<p><label >last_name*: <input type="text" name="last_name*" required></label></p>
<p><label >phone_number*: <input type="number" name="number*" required></label></p>
</fieldset>
<fieldset>
<legend>Radio</legend>
<label > contact_permission* </label><br>
<input type="radio" name="rating" required value="1 hour"> Yes <br/>
<input type="radio" name="rating" value="2 hours"> No <br/>
</fieldset>
<fieldset>
<legend>Dropdown List</legend>
<label>best_time_to_contact*: </label>
<select required>
<option value="">Please Select</option>
<option value="1"> Morning</option>
<option value="2"> Afternoon</option>
<option value="3"> Evening</option>
</select>
</fieldset>
<fieldset>
<legend>Check box</legend>
<label > how_can_i_contact_you </label><br>
<input type="checkbox" name="Phone" value="Phone"> Phone<br>
<input type="checkbox" name="Email" value="Email"> Email <br>
</fieldset>
<br>
<input type="submit" name="Submit" value="Submit">
</form>
</div>
</body>
</html>
Not quite sure how to go about this, i have tried to do text-align: left and text-align: right within the style section but no changes occur when I add this. I don't know any other way to do it. https://jsfiddle.net/tyvx60zc/ here is a jsfiddle of the code with my external css. any help would be greatly appreciated
label {
display: block;
text-align: initial;
}
label>input {
float: right;
}
Remove text-align: center; from the wrapper, and instead use:
input {
display: inline-block;
position: relative;
}
label {
display: inline-block;
width: 200px;
text-align: right;
}
https://jsfiddle.net/abalter/tyvx60zc/1/
FWIW, I also prefer using <label for="...
Add the following CSS into your CSS file:
p label{
width: 35%;
display: inline-block;
text-align: left;
}
p label input{
float: right;
}
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!