My question is pretty basic. its about the placement of my radio button
The buttons are slightly below its adjacent text. how to position it exactly in front of its text
Click at the link of sign up form as it provides the image of my problem
sign up form
see this form the radio buttons are exactly before the text
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form >
<label>Name</label>
<input type="text">
<br>
<label>Email</label>
<input type="email" name="">
<br>
<label>Date</label>
<input type="date" name="">
<br>
<label>Password</label>
<input type="password" name="">
<br>
<label>Color</label>
<input type="color" name="">
<br>
<label>Select Any One</label>
<input type="checkbox" name="">Travel
<input type="checkbox" name="">Food
<input type="checkbox" name="">Hotel
<br>
<label>Select Gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">FeMale
<br>
<select>
<option>Select Box</option>
</select>
<br>
<textarea rows="4" cols="50"></textarea>
</form>
</body>
</html>
Removing width:100% from the following code solved the problem in your jsfiddle
*{
margin:0px auto;
}
Its because that style was applicable for all the elements the text and radio button was misplaced
Trying to create alternating background colors for my check box sections in my Jquery mobile site but the colors are just staying white... Tried a couple things and none worked the way I wanted.
<fieldset data-role="controlgroup" style="width:90%;">
<div class="OddBox"><input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label></div>
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
<label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>
<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
<label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>
And my css
.OddBox{
background-color: rgba(204,204,204,1);
}
I tried using a div wrapper and adding the style right to the input line of code. When I style the label it ands up just changing the color behind the text.
Any help would be greatly appreciated.
First change your HTML so your input and labels are in the same row. Like this:
<fieldset data-role="controlgroup" style="width:90%;">
<div class="OddBox">
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label>
</div>
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>
</div>
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
<label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>
</div>
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
<label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>
</div>
</div>
Now you can simply target that div as you want. In your case, something like this:
.form_row:nth-child(odd) {
background-color: rgba(204, 204, 204, 1)
}
I forgot: here's a fiddle for you to preview and play around:
I don't think you can do this..
you did prob do this with shifting background position and hiding the actual check box
or use the :before and :after to add contents and style to replace the check box see this for example
http://cssdeck.com/labs/css-checkbox-styles
I am trying to replace checkboxes with images. I got the inputs hidden and the images shown using the label for the checkboxes, but when I click any of the checkboxes it only updates the first row of checkboxes. What am I doing wrong?
HTML:
<form action="">
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
</form>
CSS:
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label:before{
content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png');
}
input[type="checkbox"]:checked + label:before{
content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png');
}
Fiddle:
http://jsfiddle.net/D351GN3R/8jW43/
Any help would be greatly appreciated. I have no idea what's going on here!
The problem is that your label elements are looking for the id you tied them to and you have the same IDs for each row. You need unique ids for each checkbox and to match the for on each label like so:
<form action="">
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin2">
<label for="make-admin2"></label>
<input type="checkbox" id="remove-member2">
<label for="remove-member2"></label>
</div>
<div>
<input type="checkbox" id="make-admin3">
<label for="make-admin3"></label>
<input type="checkbox" id="remove-member3">
<label for="remove-member3"></label>
</div>
</form>
fiddle: http://jsfiddle.net/EWpLq/
I am a beginner with programming. I have created an HTML page with a text box, text area, select box, checkboxes, and radio buttons. I am trying to show how VBScript works with HTML for a class assignment. One of the tasks is to have a series of editing rules. The one I need help with is making sure that at least one checkbox is checked before the user can submit the form. How would I do this in VBScript?
Here is my code so far:
<html>
<head>
<script language="vbscript">
<!--
sub fred
end sub
-->
</script>
</head>
<body>
<p>
<form name="f1">
<br>
Name <input type="text" name="nametext" size="30"><p>
List your favorite things to do <P><textarea name="bigtext" rows="5" cols="40">default value</textarea>
<p>What is your favorite animal to see at the zoo?
<select name="zooanimal">
<option>default value
<option>elephants
<option>giraffes
<option>tigers
<option>seals
</select>
<p>
What is your favorite color?<br><p>
blue <input name="rb" type="radio" value="bluechecked" checked> green <input name="rb" type="radio" value="greenchecked">
pink <input name="rb" type="radio" value="pinkchecked"> yellow <input name="rb" type="radio" value="yellowchecked"> red <input name="rb" type="radio" value="redchecked"> black <input name="rb" type="radio" value="blackchecked"></p>
Which of these games do you play?<br><p>
Starcraft <input name="game" value="Starcraft" type="checkbox"> World of Warcraft <input name="game" value="WorldofWarcraft" type="checkbox">
League of Legends <input name="game" value="LeagueofLegends" type="checkbox"> none <input name="game" value="none"
type="checkbox"><P>
<p><input type="button" value="EDIT AND REPORT" onClick="fred">
<p>
<p>
</form>
</body>
</html>
If (f1.rb.checked = True) Or (f1.game.checked = True) Then
dear i have 2 text and 2 checkbox:
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<div id="hidden">
<input type="text" id="valclass1">
<input type="text" id="valclass2">
</div>
i want if i checked at "class1" then click show button "valclass1" can show. but if not checked, it hidden.how do i do that?
I would do it like this:
<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="javascript/text">
$(function()
{
$('#ShowButton').click(function()
{
if($('#class1').is(':checked')) $('#valclass1').show();
if($('#class2').is(':checked')) $('#valclass2').show();
});
});
</script>
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<input type="button" id="ShowButton" />
<input type="text" id="valclass1" style="display: none">
<input type="text" id="valclass2" style="display: none">
It would work, but probably doesn't answer your question. You need to learn more about JavaScript to be able to roll your own solution.
Check out W3C's JavaScript tutorial