I want to border add in below picture
and I want border add like
option text before and after and whole box
border css before after or background how can achieve it?
I see it says in the comments "not possible with legend an fieldset", but but it exactly reproduces the above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
display: flex;
}
fieldset {
border-radius: .4em;
border-color: gray;
border-width: 1px;
}
legend:after {
content: '*';
color: red;
}
fieldset div {
display: grid;
grid-template-columns: auto auto;
grid-gap: .5em;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Option:</legend>
<div>
<label for="not_toasted">Not Toasted</label>
<input type="radio" id="not_toasted" name="option">
<label for="toased">Toasted</label>
<input type="radio" id="toased" name="option">
</div>
<br>
</fieldset>
</form>
</body>
</html>
Related
The code below creates the title of the event and three lables, it works fine but I couldn't find out how to create a black rectangle to put the title inside it as in the attached image. Do I have to create a canvas and put the labels inside it?
Besides I could not find out how to center the title and three labels with a margin to show it more centered
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event registration form</title>
<style>
label
{
display : block;
margin : 0 0 1rem;
}
</style>
</head>
<body>
<h1>Event registration form</h1>
<label>
Number 1
<input type="number" id="age" min="0"/>
</label>
<label>
Number 2
<input type="number" id="tso" min="0"/>
</label>
<label>
Number 3
<input type="number" id="fim" min="0"/>
</label>
</body>
</html>
You can do it via css.
Black rectangle with white font:
Add a class bg-dark to your h1 and set the background color to dark and the font color to white:
.bg-dark{
background-color: #000;
color:white;
text-align:center;
}
Tag alignment:
Add a wrapper for the label and the input and use flexbox ( check the browser compatibility just in case).
Check the snippet.
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
/*Just changed the font, so it looks nice, you can use your own font*/
font-family: 'Roboto', sans-serif;
}
.bg-dark{
background-color: #000;
color:white;
text-align:center;
}
.form-style{
margin-left: 2rem;
}
.input-style{
display:flex;
flex-direction:row;
align-items:center;
justify-content:start;
padding-top: 0.7rem;
padding-bottom:0.7rem;
}
.input-style label{
margin-left: 1rem;
margin-right: 1rem;
text-align: start;
font-weight: bold;
}
.input-style .input-wrapper{
display:flex;
flex-direction:column;
}
.input-style .input-wrapper input{
border: 2px solid #f4f4f4;
border-radius: 12px;
background-color: #d4d4d4;
color: #333;
padding: 7px 13px;
padding-left: 13px;
}
<h1 class="bg-dark">Event registration form</h1>
<form class="form-style">
<div class="input-style">
<label for="age"> Number 1</label>
<div class="input-wrapper">
<input type="number" id="age" placeholder="age here" min="0"/>
<small>Age</small>
</div>
</div>
<div class="input-style">
<label for="tso">Number 2</label>
<div class="input-wrapper">
<input type="number" placeholder="tso here" id="tso" min="0"/>
<small>Tso</small>
</div>
</div>
<div class="input-style">
<label>Number 3</label>
<div class="input-wrapper">
<input type="number" placeholder="fim here" id="fim" min="0"/>
<small>Fim</small>
</div>
</div>
</form>
I tried the following code in both online editor in w3schools & pen editor in codepen. Here is that code.
body {
background-color: lavenderblush
}
.red-text {
color: red;
}
h1 {
font-family: Tangerine, times new roman;
font-size: 55px;
}
p {
font-size : 18px;
font-family: inconsolata;
}
.thick-salmon-border {
border-color: salmon;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 120px;
height: 120px;
}
.thick-royalblue-border {
border-color: royalblue;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-green-border {
border-color: green;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-sandybrown-border {
border-color: sandybrown;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-lightpink-border {
border-color: lightpink;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-rosybrown-border {
border-color: rosybrown;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.box {
border-style: solid;
border-color: rosybrown;
border-width: 5px;
}
.AntiqueWhite-box {
background-color: AntiqueWhite;
padding: 20px;
margin: 20px;
}
.MistyRose-box {
background-color: MistyRose;
padding: 20px;
margin: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<h1 class="red-text font-effect-shadow-multiple">My Favorite Songs</h1>
<p>
<img class="smaller-image thick-salmon-border" src="http://cdn3.thr.com/sites/default/files/2015/07/ed_sheeran.jpg" alt="My Favorite Songs">
<img class="smaller-image thick-royalblue-border" src="https://images.genius.com/fc44439c55552eb23d4a9ecb28a21f06.1000x1000x1.jpg " alt="My Favorite Songs">
<img class="smaller-image thick-green-border" src="https://upload.wikimedia.org/wikipedia/en/a/ad/X_cover.png" alt="My Favorite Songs">
</p>
<div class=" box AntiqueWhite-box">
<p>Ed Sheeran</p>
<ul>
<li>Shape of You</li>
<li>Thinking Out Loud</li>
<li>Galway Girl</li>
</ul>
<form action="/submit-Ed Sheeran" id="Ed Sheeran-form">
<label>
<input type="radio" name="reaction" checked>Like</label>
<label>
<input type="radio" name="reaction">Dislike</label>
<label>
<input type="radio" name="reaction">None of Above</label>
<br>
<label>
<input type="checkbox" name="electronic devices" checked>Phone</label>
<label>
<input type="checkbox" name="electronic devices">Laptop</label>
<label>
<input type="checkbox" name="electronic devices">Mp3</label>
<br>
<input type="text" placeholder="Ed Sheeran URL">
<button type="submit">Submit</button>
</form>
</div>
<p>
<img class="smaller-image thick-sandybrown-border" src="http://www.hellomagazine.com/imagenes//celebrities/2017080741334/adele-grenfell-tower-victims-screening/0-214-739/adele-t.jpg" alt="My Favorite Songs">
<img class="smaller-image thick-lightpink-border" src="http://netstorage.metrolyrics.com/albums/2777347adele-21.jpg" alt="My Favorite Songs">
<img class="smaller-image thick-rosybrown-border" src="https://i.pinimg.com/736x/a9/95/9c/a9959c17c8260650136fdc4a7d8bb218--adele-in-concert-adele--album.jpg" alt="My Favorite Songs">
<p>
<div class="box MistyRose-box">
<p>Adele</p>
<ul>
<li>Rolling In the Deep</li>
<li>Someone Like You</li>
<li>Hello</li>
</ul>
<form action="/submit-Adele" id="Adele">
<label>
<input type="radio" name="reaction" checked>Like</label>
<label>
<input type="radio" name="reaction">Dislike</label>
<label>
<input type="radio" name="reaction">None of Above</label>
<br>
<label>
<input type="checkbox" name="electronic devices" checked>Phone</label>
<label>
<input type="checkbox" name="electronic devices">Laptop</label>
<label>
<input type="checkbox" name="electronic devices">Mp3</label>
<br>
<input type="text" placeholder="Adele URL">
<button type="submit">Submit</button>
</form>
</div>
BTW, I ran this in "Edge" browser in windows. What's wrong?
This code worked fine until yesterday, but now css doesn't work. Did something change in w3schools or codepen? Is there a type-o? Please help.
First : Use head taq(required):
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
</style>
</head>
Second : Use style code like this (not required) :
<style type="text/css" media="screen">
</style>
Third : Put ; in end of your css code(in end of line 6) (not required):
body {
background-color: lavenderblush;
}
I hope second and third help you .
:)
It might be a hunch, but you said it worked until yesterday. Try clearing your
browser cache.
https://support.microsoft.com/en-us/help/10607/microsoft-edge-view-delete-browser-history
Hope this helps!
It's working correctly on my side in codepen.
you should try to hard refresh(ctrl+F5)
OR
Clear cache and cookies then load the page
OR
Try a hardcore versioning e.g. add ?1 or any thing after ? in URL and then hit URL.
e.g.
http://<your URL>.html?1
The best practice is to use styles and scripts in <head > tag as it'll be loaded before the page and you'll see the design at its best. If it doesn't get solved then above solution will work if it's cache related issue.
Use Style in <head>
You mistake is a semicolon in your body tag background-color property
body{
background-color: lavenderblush;
}
When I want to make an element with div, it creates a space between the content and the border. (blue line). Using span causes the element to break, displaying the content outside the borders.
http://i66.tinypic.com/23k4xsp.png
This is my CSS code:
#main1 {
margin-left: 40%;
background-color: lightgrey;
width: 20%;
border: 5px;
padding: 5px;
border-style: solid;
border-color: grey;
border-width: 2px;
text-align: left;
}
body {
text-align: center;
background-color: yellow;
font-family: "Arial";
}
And my HTML:
<!DOCTYPE html>
<html>
<head>
<title>BMI</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main1">
<h3>BMI calculator</h3>
<form action="results.php" method=""post"">
<input type="radio" name="gender" value="man">Man<br>
<input type="radio" name="gender" value="vrouw">Vrouw<br><br>
Lengte:<br>
<input type="text" name="lengte"><br>
Gewicht:<br>
<input type="text" name="gewicht"><br><hr>
<button action="submit">Submit</button>
</form>
</div>
</body>
</html>
Is there any workaround? I'm fairly new to webdesign, I couldn't find anything on the webz... Thanks
The space (line blue) comes because the <h3> tag has a default margin. If you set it to margin: 0 the space will disapear.
h3{
margin: 0;
}
Also, I cannot reproduce your line break: JSFiddle.
This is actually caused by the h3 tag. The header tags by default come with a margin both above and below the element.
Try adding to your CSS:
h3 { margin-top: 0; }
In the following HTML (also in jsfiddle) I am using CSS tables to align the fields in the form:
<!doctype html>
<html>
<head>
<style>
form {
display: table;
width: 200px;
}
form>div {
display: table-row;
}
form>div>label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form>div>input, form>div>textarea {
display: table-cell;
}
</style>
</head>
<body>
<form>
<div>
<label for='form-name'>Name:</label>
<input id='form-name' type='text'/>
</div>
<div>
<label for='form-email'>Email:</label>
<input id='form-email' type='email'/>
</div>
<div>
<label for='form-comments'>Comments:</label>
<textarea id='form-comments'></textarea>
</div>
<div>
<input type='submit'/>
<input type='reset'/>
</div>
</form>
</body>
</html>
My questions are:
why does the textarea cell have a greater width than that of the cells above it?
why don't the two button input fields reside on the same row?
update
Here's an updated jsfiddle based on the accepted answer.
Give width: 100%; to form>div>input, form>div>textarea and following css:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 48%;
}
will make it as per your expected output.
Working Fiddle
Attached a snippet.
<!doctype html>
<html>
<head>
<style>
form {
display: table;
width: 200px;
}
form>div {
display: table-row;
}
form>div>label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form>div>div {
display: table-cell;
}
form>div>div>input {
width: 100%;
}
form>div>div>textarea {
width: 100%;
}
form
</style>
</head>
<body>
<form>
<div>
<label forName='form-name'>Name:</label>
<div>
<input id='form-name' type='text' />
</div>
</div>
<div>
<label forName='form-email'>Email:</label>
<div>
<input id='form-email' type='email' />
</div>
</div>
<div>
<label forName='form-comments'>Comments:</label>
<div>
<textarea id='form-comments'></textarea>
</div>
</div>
<div>
<input type='submit' />
<input type='reset' />
</div>
</form>
</body>
</html>
all 4 div have the same width in your fiddle.
use float's on the submit and reset input's to display them on the same row
Try this:
HTML
<table>
<form>
<tr>
<td><label for='form-name'>Name:</label><br>
<input id='form-name' type='text'/></td>
</tr>
<tr>
<td><label for='form-email'>Email:</label><br>
<input id='form-email' type='email'/></td>
</tr>
<tr>
<td><label for='form-comments'>Comments:</label><br>
<textarea id='form-comments'></textarea></td>
</tr>
<tr>
<td><input type='submit'/>
<br>
<input type='reset'/></td>
</tr>
</form>
</table>
CSS
form {
display: table;
width: 200px;
}
form div {
display: table-row;
}
form div label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form div input, form div textarea {
display: table-cell;
}
div{
border:1px solid black;
}
table td input, table td textarea{
width: 100%;
}
table td{
width: 150px;
}
JSFiddle:
First a comment about label for:
label forName="form-email
should be written:
label for="form-email
This is quite useful for:
label (text) click -> focus on input field that text is used for.
To answer your questions:
why does the textarea cell have a greater width than that of the cells above it?
It happens because of html element textarea can have rows and cols attributes inside, it has default values if you don't specify it. Check this for example (it would be 50% less in size):
<textarea cols="10" rows="5" id='form-comments'></textarea>
Default values are listed here (20 cols, 2 rows):
http://www.w3schools.com/tags/att_textarea_rows.asp
http://www.w3schools.com/tags/att_textarea_cols.asp
If you would like to override it just put width: 100% to fill width.
Why don't the two button input fields reside on the same row?
You're using table displays on divs and your styles aren't specific enough, you're making general div and input styles and that's your problem.
To fix this, omit last div that wraps your buttons so you just have:
<input type='submit'/>
<input type='reset'/>
And remove display: table from your "form" styles.
https://jsfiddle.net/n3145f60/13/
I am trying to use a fieldset legend as a label for a group of radio buttons. The HTML and CSS I have works fine in IE8&9, firefox and chrome. In IE7 the label appears over the radio buttons. In all other browsers the label appears to the left of the buttons. I am happy to add a conditional stle for IE7 but I cant figure out what would make this work.
The problem is replicated in the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.radiolegend {
display: inline; float: left; width: 300px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left;
}
</style>
</head>
<body>
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<input type="radio" name="r1" style="display: inline;" id="r1">
<label for="r1">r1</label>
<input type="radio" name="r2" style="display: inline;" id="r2">
<label for="r2">r2</label>
</fieldset>
</form>
</body>
</html>
If you want ie7 conditional, then do this:
CSS
.radiolegend {
float: left; width: 150px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left; width:300px;
}
.cb{
float:right;
margin-top:-20px;
}
HTML
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div>
<div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div>
</fieldset></form>
Now, you need to change styling for the rest of the browsers too. Just remove margin-top:-20px; from .cb. You were wrapping text in <input> tag, it's not correct. <input> has to be self closing