I have this kind of html
<label>
<input type="checkbox">
Print document
</label>
The problem is that Print document text is alwats sticed to check box?
I can not add Print Document in new element, of controller, is it possible to do that
is simple CSS rule?
Add CSS :
input[type=checkbox]{
padding-right : 10px;
}
the correct html is : <input type="checkbox"><label>Print document</label>
After you can select in css the checkbox like this :
input[type=checkbox]{
margin-right: 15px;
}
You can do this:
FIDDLE
HTML:
<input type="checkbox">
<label>
Print document
</label>
CSS:
label{
margin-left:20px;
}
You can use margin in style:
Inline CSS:
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
Internal CSS:
<head>
<style>
input[type=checkbox]{
margin-right: 15px;
}
</style>
</head>
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
External CSS:
style.css
input[type=checkbox]{
margin-right: 15px;
}
page.html
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
Demo:
Inline CSS
Internal CSS
External CSS
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 am new to css, and I am experimenting with css attribute selectors. I am trying to implement it to a radio button, but it seems not to do it's job
I tried moving the style tag inside or outside the head tag, but that doesn't seem to be the problem at all.
<!DOCTYPE HTML>
<html>
<style>
[type="radio"]{
margin: 800 px;
color:palevioletred;
size: 200px;
}
</style>
<head>
</head>
<body>
<input type="radio" name="gender" value="male">Male</input>
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
It has to change the color,size and margin (they are just test cases). I am not getting why there are no changes?
Let me clear you something out. Until here it is ok:
<input type="radio" name="gender" value="male"/>
to continue on just do that:
<input type="radio" name="gender" value="male"/><label>Male</label>
.
.
.
easy as that.
I'll put anything that was going wrong in code comments.
<!DOCTYPE HTML>
<html>
<!-- you cannot put the style tag (or anyhting else except the doctype)
anywhere except in the head or body of the document -->
<style>
[type="radio"] {
margin: 800 px; /* has to be 800px, not 800 px */
color: palevioletred;
size: 200px; /* this would have to be font-size or width depending on what you are trying to accomplish, not size */
}
</style>
<head>
</head>
<body>
<!-- input elements cannot have text or HTML content -->
<input type="radio" name="gender" value="male">Male</input><!-- and thus, no closing tag either -->
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
I'm trying to do a pretty simple checkbox hack in an HTML email to make some basic in-email interactivity.
Something like the following:
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
Whenever the todo item is clicked, I can apply some styling marking it
done.
But if I make the todo item a link:
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
Open Google
</label>
The checkbox isn't toggled when the link is clicked.
Here's a codepen to demonstrate.
Is there any way to get the link to open, and the checkbox to toggle? As this is destined for an HTML email, any javascript solution is off the table.
The answer is: you cannot without JS.
That HTML setup makes nested interactive contents. The fact is that the <a> tag receives the click event and that cancels the click on the label. You need some JS! This way the natural behaviour of the checkbox is not altered, i.e. you can un-click:
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
Open Google
</label>
Working Demo
EDIT
As it is for email and you cant use JS, just add a tabindex to a tag and a css. Its the closest you can get without using javascript
Working Demo below:
label {
display: block;
padding: 10px 0;
}
input:checked + div{
text-decoration: line-through;
}
a:focus{
text-decoration: line-through;outline:0;}
<label>
<input type="checkbox" style="display:none"/>
<div>Todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none"/>
<div>Another todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none" id='btnControl'/>
Open Google
</label>
JS
function myFunction() {
document.getElementById("me").style.textDecoration = "line-through";
}
HTML
<label>
<input type="checkbox" style="display:none"/>
<a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open
Google</a>
</label>
This code
HTML
<input type="text" name="category" id="category" value=""> <input type="text" name="category_1" id="category_1" value="" tabindex="1"></div>
Though with repeated efforts starting from adding tabindex, nbsp to css cannot have these two inputs appear on single line.
CSS
<style type="text/css">
input.category {
vertical-align:top;
}
</style>
UPDATE
I think there is a plugin css which is over-ridding this behaviour. I have applied all what you guys said nothing works here is the css. I'm using plugin mcdropdown. Here is the code at start is just the copy of style followed with is is the css copy paste of mcdropdown.css file.
Please let me know how this can be done.
add class="category" for input fields and css:
.category {
float: left;
display: block;
}
#category_1 {
margin-left: 20px; /* or space you want..*/
}
and remove those spaces ( ) not really good way to code :)
Benefit of changing element display to block is that you can set vertical margins and paddings to it when needed.
Example usage with labels could be:
html:
<div class="col1">
<label for="field1">Field1 title</label>
<input type="text" name="field1" id="field1" />
</div>
<div class="col2">
<label for="field2">Field2 title</label>
<input type="text" name="field2" id="field2" />
</div>
<div class="clearfix"></div>
CSS:
.col1 {
float: left;
width: 200px;
}
.col2 {
float: left;
width: 200px;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To get them to display on a single line use the css display attribute to change their display to inline here is how I do it:
<html>
<head>
<style>
#category, #category_1{
display: inline;
}
</style>
</head>
<body>
<input type="text" name="category" id="category" value="">
<input type="text" name="category_1" id="category_1" value="" tabindex="1">
</body>
That should solve your problem and it's really simple to! Have a great day!
They are both inline elements and should appear on the same line by default. Close your input tags appropriately (<input... />) and remove the closing </div> tag:
change
<input type="text" name="category" id="category" value=""> <input type="text" name="category_1" id="category_1" value="" tabindex="1"></div>
to
<input type="text" name="category" id="category" value="" /> <input type="text" name="category_1" id="category_1" value="" tabindex="1" />
You can do that by removing float, and add display:inline-block.
Here: http://jsfiddle.net/xW3tt/2/
Can you try this, By default your elements aligned and dispalyed in single line. If you want to apply any css styling or css properties then you may use as like in below. Added class in input elements class="category"
CSS:
<style type="text/css">
input.category {
float:left;
width:100px;
}
</style>
HTML:
<div style='width:500px;'>
<input type="text" name="category" id="category" value="" class="category">
<input type="text" name="category_1" id="category_1" value="" class="category" tabindex="1">
</div>
This answer is a wild guess operation, Try
Try applying below CSS to over-ride:
input.category {
float:left !important;
margin: 0 !important;
padding:0 !important;
clear:none !important;
}
and apply .category class to both your input (*SEE FIDDLE)
FIDDLE DEMO
I have 3 radio buttons on the same line in a td of the table like that:
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
I tryed to use width attribute, margin attribute but nothing changes.
Thank you very much.
Check working example on jsbin
Also, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
input[type="radio"]{
margin: 0 10px 0 10px;
}
Use like this in CSS
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
Try this:
input[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!
If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.
HTML:
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
http://jsfiddle.net/9cJJ9/