Basically in the form when you click on the image, it should also check the box. This works in in all browsers but IE7 and IE8. Anyone have any ideas?
<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>
<p align="center"><label for="interest1"><img src="/images/interest1.jpg" width="152" height="152" alt="" /></label>
<label for="interest2"><img src="/images/interest2.jpg" width="152" height="152" alt="" /></label>
<label for="interest3"><img src="/images/interest.jpg" width="152" height="152" alt="" /></label></P><!-- code making checkbox be an image-->
</form>
It seems that IE < 9 doesn't like subnodes (non-input) in a label. A workaround is to set the images as the background of the label and making the label be inline-block so you can set its size. Tested in IE8 http://jsfiddle.net/K9FEk/8/
CSS
label {
border:1px solid red;
display:inline-block;
}
#label-interest1 {
background-image: url(http://www.gravatar.com/avatar/36fa212d5215d9f282033375834ba0c0?s=120&d=identicon&r=PG);
width: 152px;
height:152px;
}
HTML
<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<p align="center">
<label id="label-interest1" for="interest1"></label>
</p>
</form>
Not sure what the problem is but this CSS made it work for me in IE8 and IE7 mode using IE9.
label {
display:inline-block; /* "block" would also work */
}
img {
position:relative;
z-index:-1;
}
Demo: http://jsfiddle.net/K9FEk/3/
It may be because the image's space on the page was expanding out of the display:inline styled <label>, or that it was "above" the label, hijacking the click event.
Related
I want to have option buttons to have image and text below image. Right now i have managed to have image but dont know how to arrange text exactly below image without disturbing alignment.
<div>
<label>
<input type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>
<label>
<input type="radio" name="fb" value="big" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://cache1.asset-cache.net/gc/120523070-dogs-gods-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=de2%2btiBrzaNEk9d4xwzh%2fvq8qyKYRsuWlpI1%2f65dmsaBkiniqNTDJkrq7zrUnaC6">
</label>
</div>
<div>
<label>
<input type="radio" name="fb" value="small1" text="ss" />
<img src="http://placehold.it/20x20/35d/fff&text=f" text="sdsdsd">
</label>
<label>
<input type="radio" name="fb" value="big1" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med1" />
<img src="http://cache1.asset-cache.net/gc/120523070-dogs-gods-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=de2%2btiBrzaNEk9d4xwzh%2fvq8qyKYRsuWlpI1%2f65dmsaBkiniqNTDJkrq7zrUnaC6">
</label>
</div>
Here is Fiddle .
I am looking for output something like below
Also wish to generate option button in rows and column dynamically. Any idea related on how to achieve it?
Just set the to display: block;
.figures span, .figures img {
display: block;
}
you can write as
<label>
<input type="radio" name="fb" value="big1" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
<span>your text</span>
</label>
Just add this css to the page:
<Style>
label{
float:left;
height:100px;/*can be modified*/
padding:10px;/*can be modified*/
width:50px;
}
</Style>
and after every image add and then the name as below:
<img src="http://placehold.it/20x20/35d/fff&text=f"><br/>
My name
To control how many images per row there is two ways.
1 - adding div for clear:
<div style='clear:both;'></div>
2- add everything inside a div and adjust the width of this div to until your reach to the proper count of images.
add this to the main div that you have
<div id="maincontainer" style="width:100px">
I updated the css by adding width:50px which means every label will be 50px... the main container is 100 => 2 items / row.
make the width of maincontainer to 150 -> 3 item / row....
According to your need, you can get desired output by using <br/> tag or without tag.
With <br /> Tag
fiddle
Without <br /> Tag
fiddle
In fiddle 1 i have used <br / > tag and in second i have used display:block; on images and display:inline-block on label. So use whatever you are ok with :)
You could wrap your images inside a <figure> tag and use <figcaption> for your text below it. I'm not sure what you mean in regards to "option buttons" though.
http://codepen.io/partypete25/pen/KzJOyY
<figure>
<img src="image-src-url" alt="">
<figcaption>Dog</figcaption>
</figure>
Change your CSS with this:
label > input + img {
/* IMAGE STYLES */
cursor: pointer;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid #ccc;
float: left;
}
Demo
I wrote the HTML below to display two radio buttons and some text.
<input id="radio1" type="radio" checked="checked"/>Create the application name <br/>
<input id="radio2" type="radio"/> Create the Source name
My issue is that the radio buttons and the text are not aligning properly. The radio buttons are displaying a little bit below the text. How do I align the radio buttons and the text on the same line with proper alignment?
Demo
vertical-align: middle:
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
The problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes.
Use inline style, weird but true:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
<br/>
<br/>
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
<br/>
<br/>
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
Edit
this short explanation by Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render respectably in Chrome, IE, Firefox, Opera, and Safari.
What I did was add td{ line-height:1.5em }
Not too clear what you're after specifically..but:
Demo Fiddle
Add:
input{
vertical-align:top;
}
You may also want to chage this to vertical-align:middle;margin:0; depending on your requirements.
Try it below code...
input {float: left;
margin-top: 3px;}
add style for input type as
input
{
vertical-align: top;
}
and avoid the space in front of Create the Source name.
<input id="radio2" type="radio"/> Create the Source name
<input id="radio1" type="radio" checked="checked"/><label for="radio1">Create the application name</label>
<input id="radio2" type="radio" /><label for="radio2">Create the application name</label>
input,label{
vertical-align: top;
}
FIDDLE DEMO
<form >
<label>
<input name="radiobutton" type="radio" value="radiobutton" />
Man</label>
<label><br>
<input name="radiobutton" type="radio" value="radiobutton" />
Women</label>
</form>
/******this will help you********/
I have a form whose submit input button has a background-image and is shifted left over the top of the input field:
This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?
HTML:
<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>
CSS:
#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}
input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}
This is a start: (demo: http://jsfiddle.net/KYL3A/)
I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8
<form id="" action="" method="post">
<div id="searchwrap">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</div>
</form>
CSS
#searchwrap {
display: inline-block;
border: 1px solid #333;
padding: 0 10px;
}
#search {
width:150px;
height:36px;
border:0;
}
input.searchsub {
width:23px;
height:23px;
background:red url(); // added red as i dont have your image
margin:8px 0 0 0px;
cursor:pointer;
}
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.
Source:
The first answer on this page and this source
The below code is for adding a product to the basket.
Instead of just using an image as a buy button in the input, I would like to have an image or a fill in the background and HTML text above it.
<input border="0" src="/images/buy.png" type="image" />
This is the complete code:
<span class="BuyButton_ProductInfo">
<table id="BUYSECTION">
<tbody>
<tr>
<td valign="top" align="left">Count<br />
<input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
</td>
<td> </td>
<td class="BuyButton_ProductInfo">Buy<br />
<input border="0" src="/images/buy.png" type="image" />
</td>
</tr>
</tbody>
</table>
</span>
You can insert text above input elements. I'm use label element for this work. You can edit the label element position with using CSS codes.
<input src="/images/buy.png" type="image" id="myButton" />
<label for="myButton">Click me or image</label>
Not sure if I understand your question correctly either,
But if you're talking about a solid background color on the submit button, you can use
<input type="submit" style="background-color: black; color: white;" value="your text" />
Not sure I understand completely what you are trying to accomplish? Can you just set the display property in CSS?
#BUYSECTION input[type="image"] {
display:block;
}
Otherwise, can you elaborate? Maybe provide a JSFiddle link to show the issue?
EDITED
Is it that you want a clickable submit button, with a pattern or "button-like" fill, but to still have text at a different z-index "above" the button?
HTML:
<button type="submit">Buy</button>
CSS:
button{
/* reset the button style properties */
border:0;
display:block;
/* include the image and dimensions */
width:50px;
height: 20px;
background:transparent url("images/buy.png") no-repeat 50% 50%;
/* format the text */
text-align:center;
padding:5px;
font-weight:bold;
color:#333;
}
Try this:
HTML:
<input type="button" value="Texto del boton" class="imgButton" />
CSS:
.imgButton{
background-image:url(/images/buy.png);
width: 100%;
height: 100%;
}
Saludos!
I seem to be having a strange problem which I can't fully understand.
This is my html:
<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox" type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/>
Observações:
<input name="Observações" class="checkbox" type="checkbox" value="Observações" checked />
</div>
Inside an Html page with nothing else except the default stuff from Dreamweaver, placed inside the body.
With this CSS attached:
#charset "UTF-8";
/* CSS Document */
.menu
{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;
}
.checkbox {
float:right;
}
Now this code renders properly in Safari, text on the left and check boxes aligned on the right inside a div.
In Firefox it does not.
The checkboxes seem like they dropped a line.
It seems to be related to a problem I can't understand, but If the checkbox comes first like:
<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />Cliente:
<br/>
It renders the intended way in Firefox although as expected its not good on Safari.
I can't seem to find what's causing the line drop.
Floats only affect code that follows them in the html. Since you have the input after the label, it will be floated right but on a new line. Different browsers render <br> in different ways.
A good cross-browser way to do checkboxes is
.cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}
<div class="menu">
Por favor seleccione os conteúdos:
<div class="cb-row">
<label for="nome">Nome:</label>
<input id="nome" name="Nome" type="checkbox" value="Nome" checked />
</div>
<div class="cb-row">
<label for="data">Data:</label>
<input id="data" name="Data" type="checkbox" value="Data" checked />
</div>
<div class="cb-row">
<label for="cliente">Cliente:</label>
<input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
</div>
<div class="cb-row">
<label for="ob">Observações:</label>
<input id="ob" name="Observações" type="checkbox" value="Observações" checked />
</div>
</div>
The label is floated left and the checkbox is floated right. They are contained in a row div that controls the margins between rows. I removed the class= from the input and instead styled the input in .cb-row input
An advantage of using label with the for= and input with the matching id=, is that when you click on the label, the checkbox will be selected/unselected.