I try to style a video controls.
I want two radio buttons for fast forward / rewind.
<input name="group1" type="radio" id="ff" />
<label for="ff"><i class="material-icons">fast_forward</i></label>
<input name="group1" type="radio" id="fr" />
<label for="fr"><i class="material-icons">fast_rewind</i></label>
How can I style them to appear as buttons with pressed state for the selected radio button?
This is a basic sample you can tweak to suit your needs
#help label {
float:left;
width:120px;
margin:0px;
background-color:#FFF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}
#help label span {
text-align:center;
font-size: 16px;
padding:10px 0px;
display:block;
}
#help label input {
position:absolute;
top:-20px;
}
#help input:checked + span {
background-color:indigo;
color:white;
}
#help .white {
background-color:#FFFFFF;
color:#000;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>
<body>
<div id="help" class="row halign">
<label class="white">
<input type="radio" name="unemployment">
<span>I</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>need</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>a</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>job</span>
</label>
</div>
</body>
</html>
Related
i'm writing a page for a mobile version of a website and i'd like to insert a checkbox with label Dark Theme, when an user check this box change background color (of entire website) to black and text color to white, i found many part of codes in internet but it doesn't works, i don't know why.
For Example i tried this:
#select1:checked ~ div .wrapper{
background-color:black;
color: white;
}
<div class="wrapper">
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
</div>
Can you help me?
Thank you
this code is the example of Change background Color
<div id= "genre">
What do you bust a move to?
<br>
<br>
<form name="music" method="post" action="">
<p>
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Doo
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop
<br>
</form>
</div>
function changeColour(value)
{
var color = document.body.style.backgroundColor;
switch(value)
{
case 'b':
color = "#FF0000";
break;
case 'r':
color = "#0000FF";
break;
case 'p':
color = "#FF00FF";
break;
}
document.body.style.backgroundColor = color;
}
Jsfiddle
Change div background color by using css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrapper{
width:50px;
height:50px;
background-color:#000;
}
#select2:checked ~ .wrapper{
background-color:#060;
}
#select3:checked ~ .wrapper{
background-color:#0000FF;
}
</style>
</head>
<body>
<input id="select1" name="check1" type="checkbox" checked />
<label for="select1">Dark Theme</label>
<input id="select2" name="check1" type="checkbox" />
<label for="select2">Green Theme</label>
<input id="select3" name="check1" type="checkbox" />
<label for="select3">Blue Theme</label>
<div class="wrapper"></div>
</body>
</html>
The only way you can get it through pure CSS is the following snippet:
#select1:checked~div.wrapper {
background-color: black;
color: white;
}
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
<div class="wrapper">
Some text here
</div>
NOTE: Using JS is the correct way to achieve what you are expecting.
<?
$time = $_POST['time'];
echo 'you have choosen '. $time;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.radio > input[type=radio]{
position:absolute;
margin-left:-99999px;
}
input[type=radio] + span{
cursor:pointer;
border:2px solid transparent;
}
span.active{
background-color:green;
}
.but1{
background-color:#009;
color:#FFF;
border:none;
border-radius:15px;
width:200px;
height:50px;
font-size:18px;
font-weight:bold;
border-radius:15px;
text-align:center;
padding:8px;
font-family:Verdana, Geneva, sans-serif;
float:left;
margin-left:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form action="Untitled3.php" method="post">
<label class="radio" for="fb1">
<input id="fb1" type="radio" name="time" value="all day" checked />
<span class="but1 active">Available<br>All day</span>
</label>
<label class="radio" for="fb2">
<input id="fb2" type="radio" name="time" value="between 8-12"/>
<span class="but1">Between<br>8am - 12am</span>
</label>
<label class="radio" for="fb3">
<input id="fb3" type="radio" name="time" value="between 12-4" />
<span class="but1">Between<br>12pm - 4pm</span>
</label>
<input name="submit" type="submit" value="send" />
<script type="text/javascript">
$('.radio').click(function(){
if( $(this).find('input').is(":checked") ){
$('.radio span').removeClass('active');
$(this).find('span').addClass('active');
}
});
</script>
</form>
</body>
</html>
Why is it that when I add the submit button, the CSS doesn't work in IE, but fine in all other browsers. When I remove the button, the CSS works fine in all browsers?
Please help, this problem is driving my nuts, IE should be banned.
Live code with the button is http://goo.gl/LbSWQG
I am new to HTML5 so all the help I can get is appreciated. I have three fields (First Name, Last Name and Birth Date) and I am trying to align them together. I would like to align the fields together horizontally and vertically.
Here is my simple code so far:
<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>
Here is the CSS I have:
input[type=text] {
border: 1px solid #D4E2F1;
}
input[type=date] {
border: 1px solid #D4E2F1;
}
input[type=color] {
border: 1px solid #D4E2F1;
}
I would prefer not use tables as I am not trying to display tabular data. I am looking for a efficient and correct way to do this.
Your help would be greatly appreciated.
Thanks.
AJ
Try this:
HTML:
<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>
CSS:
.user-form { padding:20px; }
.user-form .field { padding: 4px; margin:1px; background: #eee; }
.user-form .field label { display:inline-block; width:120px; margin-left:5px; }
.user-form .field input { display:inline-block; }
jsFiddle: http://jsfiddle.net/VuSX4/
Try this
HTML:
<
div style="display:block; position:relative; width:100(or something)px; height:auto; margin:0px auto 0px;"
>
Put your form markup in here
<
/div>
I looked all over for this answer and found the information at W3C Schools and a bit of trial and error
This validates at http://validator.w3.org/
Here is my page. I need to insert whole code here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs ul li:first a').addClass("active");
$('#forms').find('form').hide().fadeIn(1500);
$("#tabs ul li").click(function() {
$("#tabs ul li").removeClass("active");
$(this).addClass("active");
$("#forms form").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<style type="text/css">
* { margin:0; padding:0; }
body { background:#27476B; }
.clear { clear:both; }
#wrapper { width:510px; height:331px; overflow:hidden; padding:10px; }
#tabs ul { padding-left:15px; list-style:none; }
#tabs ul li { display:block; float:left; text-align:center; }
#tabs ul li a { padding:3px 20px 2px 20px; color:#fff; text-decoration:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
#tabs ul li a:hover { background:#AEBAC1; }
#tabs ul li a.active, #tabs ul li.active a:hover { background:#AEBAC1; color:#333; }
#forms form { background:#AEBAC1; border:2px solid #333; padding-left:5px; }
.twocol { display:block; float:left; width:250px; margin-bottom:10px; }
.twocol label { margin-top:.33em; display:block; width:240px;}
.twocol select, .twocol input[type="text"] { background:#456A87; color:#fff; display:block; width:240px; font-size:16px; }
.twocol span { padding:0 8px 0 5px; }
.search { width:500px; text-align:center; margin-bottom:5px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="tabs">
<ul>
<li>Properties</li>
<li>Developments</li>
<li>Agents</li>
</ul>
</div>
<div class="clear"></div>
<div id="forms">
<!--
Search Form for Properties
-->
<form id="properties" name="properties" method="post" action="">
<div class="twocol">
<label for="city">City:</label>
<select name="city" size="1">
<option>-</option><option>asdfadf</option><option>-</option>
</select>
<label for="bedrooms">Bedroom:</label>
<select name="bedrooms" size="1">
<option>-</option>
</select>
<label for="minprice">Minimum Price:</label>
<select name="minprice" size="1">
<option>-</option>
</select>
<label for="minarea">Minimum Area:</label>
<select name="minarea" size="1">
<option>-</option>
</select>
<label for="propertytype">Property Type:</label>
<select name="propertytype" size="1">
<option>-</option>
</select>
</div>
<div class="twocol">
<label for="location">Location:</label>
<select name="location" size="1">
<option>-</option>
</select>
<label for="addedwithin">Added Within:</label>
<select name="addedwithin" size="1">
<option>-</option>
</select>
<label for="maxprice">Maximum Price:</label>
<select name="maxprice" size="1">
<option>-</option>
</select>
<label for="maxarea">Maximum Area:</label>
<select name="maxarea" size="1">
<option>-</option>
</select>
<label for="searchfor">Search For:</label>
<input name="searchfor" type="radio" value="sale" /><span>Sale</span>
<input name="searchfor" type="radio" value="purchase" /><span>Purchase</span>
<input name="searchfor" type="radio" value="rental" /><span>Rental</span>
</div>
<hr class="clear" /><br />
<div class="search">
<input type="submit" value="Search" />
</div>
</form>
<!--
Search Form for Developments
-->
<form id="developments" name="developments" method="post" action="">
<div class="twocol">
<label for="city">City:</label>
<select name="city" size="1">
<option>-</option><option>asdfadf</option><option>-</option>
</select>
</div>
<div class="twocol">
<label for="developmentname">Development name:</label>
<input type="text" name="developementname" />
</div>
<hr class="clear" /><br />
<div class="search">
<input type="submit" value="Search" />
</div>
</form>
</div>
</div>
</body>
</html>
Here is the perfect view (on Firefox)
Following problems are identified by me, Please let me know if there are some others too.
IE8 and Chrome are showing some extra height (which is displaying a little part of 2nd form)
IE6 not showing the width specified in CSS.
In IE6, initially tabs div is touching with the forms div. But on mouse over it adds some extra spacing.
How can it be solved.
I am not sure what you mean by points 1 & 2, but 3 I got it fixed. I might have fixed 1 & 2(not sure).
Let me know how this works for you.
http://jsfiddle.net/3uMyA/3/
I've got the following form where everything formats properly with the exception of the submit buttons at the bottom of the form: they should be centered.
I've tried a variety of different combinations of nesting divs in combination with setting widths, margins, and text-aligns, but I can't seem to figure out what I am doing wrong.
http://jsfiddle.net/vM5fp/
Here is what I have so far...
HTML
<form id="myForm" action="#" method="post">
<div>
<label for="pickone" id="ruleTypeLabel">Pick One: </label>
<select id="pickone" name="pickone">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</div>
<div>
<label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label>
<input type="text" id="field1" name="field1" />
</div>
<div>
<label for="field2" id="field2label">field 2: </label>
<input type="text" id="field2" name="field2" />
</div>
<div>
<label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label>
<textarea id="field 3" name="field 3"></textarea>
</div>
<div>
<label for="field4" id="field4label">field 4: </label>
<input type="text" id="field4" name="field4" />
</div>
<div>
<label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="startDate" name="startDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="endDate" name="endDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<div class="buttonrow">
<input type="submit" id="submitButton" value="Submit" />
<input type="submit" id="cancelButton" value="Cancel" />
</div>
</div>
</form>
And the css:
form {
width:300px;
margin:10px auto;
}
form div {
clear:both;
width:100%;
}
form div label {
display:block;
text-align:right;
width:140px;
float:left;
}
form div label .helpercomment{
display:block;
font-size:.8em;
font-style:italic;
color:#C1C2D7;
background-color:#FFF;
text-align:right;
}
form div input, form select, form textarea {
float:left;
width:140px;
margin:2px 0 20px 10px;
}
form div input.date {
width:113px;
}
form div a.calendaricon {
}
form div a.calendaricon img {
display:inline;
border:none;
margin-top:2px;
margin-left:4px;
}
form div div.buttonrow {
text-align:center;
width:auto;
margin:auto;
}
.buttonrow #submitButton, .buttonrow #cancelButton {
width:auto;
}
The buttons are floating (because they're inputs too). Either change them to <button> or modify the CSS:
.buttonrow #submitButton, .buttonrow #cancelButton {
float: none;
width:auto;
}
http://jsfiddle.net/UcPD2/
You're far better off using a styled unordered list than DIVs to format forms.
form ul, form li {
margin:0;
padding:0
}
<ul>
<li><label>....</label> <input ... /></li>
...
</ul>