How to set src attribute of [input=image] by external css - html
I want to display an html with an input type=image.
I use a base64 svg string for the image.
When setting the src within the input attribute src - it works fine (btn1).
When setting the src via external css and setting image class, it doesn't work.
I Tried 2 different options btn2,bt3.
<html>
<style>
.img2 {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==";
}
.img3 {
src: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
</body>
</html>
Please advise.
The <img> src attribute is not a property that you can style with CSS.
If you really need to style the button with CSS, you could do it this way:
It involves using a pseudo-element to cover up the contents of the <input> and setting its background to the SVG image.
It's a bit hacky, as it requires that you know in advance what the background colour behind the imput element is. And it'll almost certainly need to be a solid colour.
#imgBtn2, #imgBtn3
{
position: relative;
width: 24px;
height: 24px;
color: transparent; /* hide alt text */
}
#imgBtn2::before, #imgBtn3::before
{
content: '';
display: block;
width: 24px;
height: 24px;
position: absolute;
background-color: white;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
Update
If you don't need an <input type="image/> then I would suggest just using a <button> element. Then you can just style the background.
Here we separate out the button styling from the CSS class for the button icon. So if you have buttons of the same type with different icons, you can reuse class imgButton and just give it a different icon class.
.imgBtn
{
border: none;
width: 24px;
height: 24px;
background-color: transparent;
}
.reload
{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<button type="button" class="imgBtn reload"/>
Since CSS is not a must, then javascript is here to do the job.
example , setting your dataUri inside an array and and a loop on your inputs to update the src attribute:
// set an array with each of your dataUris
const img =new Array ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==' ,
' data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==',
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==');
// reset src attributes from dataUri stored in img()
let myIpts =document.querySelectorAll('input[id^="imgBtn"]');
for (i = 0; i < myIpts.length; i++) {
myIpts[i].setAttribute('src', img[i] );
}
<html>
<style>
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg=="
alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for=" imgBtn2 ">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3 ">btn3 - by css class</label>
</body>
</html>
Related
Icon color not changing when focusing on input
I have been trying a couple of methods here to make my font-awesome icon colored white as I focus on my input... but nothing seems to work.
My code looks like this:
HTML
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
I've tried doing:
input:focus + .fas-fa-user-secret {
color: #fff;
}
input:focus + .fas {
color: #fff;
}
input:focus + .i {
color: #fff;
}
But none of the above CSS code works. Not even the text in the input is white, but whenever I remove the + and the rest it does work for input.
Any help on this is appreciated, looked at every thread about making icons a different color when focusing on input.
Thanks.
You need to use input:focus+.icon since you have your icon inside the .icon div.
input:focus+.icon {
color: #ff0000;
}
input:focus {
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
The problem is that you are using general sibling combinator, which select its siblings right after it, which is a <div>, not the icon.
input:focus + .fas-fa-user-secret {
color: #fff;
}
What you may want to do is set color: inherit to the icon, and then set desiring color for the div via this CSS selector and it will be fine
input:focus + div {
//your style
}
An Image Button navigate to another site html/css
This is my code:
HTML:
<a href="index2.html">
<input type="image" class="button" value="">
</a>
CSS:
.button {
background:url(example.jpg) no-repeat;
cursor:-webkit-grab;
border: none;
}
What should happen is that it display an image and when I click on, it will navigate to another this site index2.html. It worked with another image but it had an annoying border but after I changed the image it doesn't work any more.
You do not need an input type button, simply use img...
html:
<a href="index2.html">
<img src="example.jpg" />
</a>
css:
a img {
border: none;
cursor: grab;
}
How to change the styles of the following links?
Here i have some code from my website I'm making. I'm having trouble styling the links within css. I'm not sure why they won't change. Also the reason I've used class is because i have this code repeated 4 times (don't worry about why :P) Btw I've also tried putting the 'a' infront of .profileLinks that didnt work either :(
Here is the external CSS style sheet
#trends .profileLinks a:link{
color:#0000FF;
text-decoration:none;
background: transparent;
}
#trends .profileLinks a:visited {
text-decoration: none;
color: #0000FF;
background: transparent;
}
And here is the Html Code
<div id="trends">
<h1> Trends... </h1>
<img src="logo.png" alt="Profile Image" height="59" width="68">
<a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
<a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<br/>
<p>
PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
</p>
<a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<form method="post" action="">
<textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000">
</textarea>
<input type="submit" value="Submit" />
</form>
</div>
<br/>
This selector, #trends .profileLinks a:link will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so: #trends a.profileLinks:link Same goes for the other rule.
Do you have any other stylesheet overridden to yours?
Try this
#trends .profileLinks a:link {
color:#0000FF !important;
text-decoration:none;
background: transparent;
}
Hey try this one Just defined color to all links. Change the link color to your desire one.
display div next to label without breaking line
I would like to drow a label and input text next to it.
the input text must be inside a div - later I would like to add element to the div.
I am using float in order to display the div next to the label/
here is me html:
<!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" dir="rtl" >
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
label: <div style="float:left;"><input type="text" /></div>
</body>
</html>
Ihe problem is that I get the div before the text.
http://jsfiddle.net/2wNbR/
How can I fix it?
UPDATE
I actually want to use an autocomplete plugin I've wrote instead of the input text. The autocomplete uses a div. I don't want to create a "prerequisite" to the label so solution like add <span style="float:right"></span> around the label are not good.
UPDATE2
I thought it is not necessary but I see it is importent.
Here is the full example: http://jsfiddle.net/2wNbR/16/
.Autocomplete {
direction: ltr;
}
.Autocomplete, .Autocomplete .Arrow, .Autocomplete .CodeField,
.Autocomplete .SmartField, .Autocomplete .Selector {
float:left;
}
.Autocomplete .Arrow {
background-image:url(drop.gif);
background-position:top right;
height:17px;
width:17px;
cursor:pointer;
}
.Autocomplete .OptionsListHolder {
height:0px;
width:0px;
}
.Autocomplete .OptionsList
{
position:relative;
z-index:999;
top:0px;
right:0px;
border: 1px solid #888888;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
}
.Autocomplete .CodeField
{
width:40px;
border: 1px solid #888888;
height:13px;
}
.Autocomplete .SmartField
{
width:auto;
border: 1px solid #888888;
height:13px;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
}
Customer:
<div class="Autocomplete">
<input type="text" class="CodeField" />
<div class="Selector">
<input type="text" class="SmartField" />
<div class="Arrow"></div>
<div class="OptionsListHolder">
<select class="OptionsList" size="8">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
<option>opt 4</option>
<option>opt 5 - long item text</option>
</select>
</div>
</div>
</div>
<br>
text to check if the OptionsList is override this text
<div style="display:inline-block;"><input type="text" /></div> And you also might want to check the <label> html element.
Just put a <span> around the label and float that too, remember to clear it. <span style="float: left;">label: </span><div style="float:left;"><input type="text" /></div>
label: <span><input type="text" /></span> or <div style="float:left">label:</div><div><input type="text" /></div> will help but if you can say the purpose you will more likely get an appropriate answer
I'm guessing that the poster is actually using coldfusion and using <cfinput> rather than <input> -- if this is the case, here's the scenario: You have a <cfinput> tag with an autosuggest= value and you want to put a text label to the left of the input field. <cfinput with autosuggest uses ajax and automatically adds styled ajax divs to, including the cf.css which adds the float:left; style. One way you can work around this is by surrounding your label and the cfinput in a table, with each in their own <td>'s.. so <table border=0><tr><td>label:</td><td><cfinput autosuggest="value1,value2,etc" name="inputname"></td></tr></table> That should do it!
Radio/checkbox alignment in HTML/CSS
What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based: <table> <tr> <td><input type="radio" name="opt"></td> <td>Option 1</td> </tr> <tr> <td><input type="radio" name="opt"></td> <td>Option 2</td> </tr> </table> This may be frown upon by some. I’ve just spent some time (again) investigating a tableless solution but failed. I’ve tried various combinations of floats, absolute/relative positioning and similar approaches. Not only that they mostly relied silently on an estimated height of the radio buttons / checkboxes, but they also behaved differently in different browsers. Ideally, I would like to find a solution which does not assume anything about sizes or special browser quirks. I’m fine with using tables, but I wonder where there is another solution.
I think I have finally solved the problem. One commonly recommended solution is to use vertical-align: middle: <input type="radio" style="vertical-align: middle"> Label The problem, however, is that this still produces visible misalignments even though it should theoretically work. The CSS2 specification says that: vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. So it should be in the perfect centre (the x-height is the height of the character x). However, the problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes. One can check, for instance in Firefox using Firebug, that the default checkbox margin in Firefox is 3px 3px 0px 5px. I'm not sure where it comes from, but the other browsers seem to have similar margins as well. So to get a perfect alignment, one needs to get rid of these margins: <input type="radio" style="vertical-align: middle; margin: 0px;"> Label It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely.
The following works in Firefox and Opera (sorry, I do not have access to other browsers at the moment):
<div class="form-field">
<input id="option1" type="radio" name="opt"/>
<label for="option1">Option 1</label>
</div>
The CSS:
.form-field * {
vertical-align: middle;
}
I found the best and easiest way to do it is this one because you don't need to add labels, divs or whatsoever.
input { vertical-align: middle; margin-top: -1px;}
I wouldn't use tables for this at all. CSS can easily do this.
I would do something like this:
<p class="clearfix">
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</p>
p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }
Note: I have used the clearfix class from : http://www.positioniseverything.net/easyclearing.html
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
This is a bit of a hack but this CSS seems to get it working very nicely in all browsers the same as using tables (apart from chrome)
input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=radio] { margin-top: -2px; }
}
Make sure you use labels with your radios for it to work. i.e.
<option> <label>My Radio</label>
If your label is long and goes on multiple rows setting the width and display:inline-block will help.
.form-field * {
vertical-align: middle;
}
.form-field input {
clear:left;
}
.form-field label {
width:200px;
display:inline-block;
}
<div class="form-field">
<input id="option1" type="radio" name="opt" value="1"/>
<label for="option1">Option 1 is very long and is likely to go on two lines.</label>
<input id="option2" type="radio" name="opt" value="2"/>
<label for="option2">Option 2 might fit into one line.</label>
</div>
I found the best fix for this was to give the input a height that matches the label. At least this fixed my problem with inconsistencies in Firefox and IE.
input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }
<li>
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</li>
The following code should work :)
Regards,
<style type="text/css">
input[type=checkbox] {
margin-bottom: 4px;
vertical-align: middle;
}
label {
vertical-align: middle;
}
</style>
<input id="checkBox1" type="checkbox" /><label for="checkBox1">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />
This is a simple solution which solved the problem for me:
label
{
/* for firefox */
vertical-align:middle;
/*for internet explorer */
*bottom:3px;
*position:relative;
padding-bottom:7px;
}
There are several ways to implement it:
For ASP.NET Standard CheckBox:
.tdInputCheckBox
{
position:relative;
top:-2px;
}
<table>
<tr>
<td class="tdInputCheckBox">
<asp:CheckBox ID="chkMale" runat="server" Text="Male" />
<asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
</td>
</tr>
</table>
For DevExpress CheckBox:
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
For RadioButtonList:
<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
For Required Field Validators:
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
Below I will insert a checkbox dynamically. Style is included to align the checkbox and most important to make sure word wrap is straight. the most important thing here is display: table-cell; for the alignment
The visual basic code.
'the code to dynamically insert a checkbox
Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"
'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6
'create the checkbox
Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()
'connect the checkbox
tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)
'the style for the checkbox
input[type="checkbox"] {float: left; width: 5%; height:20px; border: 1px solid black; }
.tdCheck label { width: 90%;display: table-cell; align:right;}
.tdCheck {width:100%;}
and the HTML output
<head id="HEAD1">
<title>
name
</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left; width: 20px; height:20px; }
.tdCheck label { width: 90%;display: table-cell; align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{
vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1; border-style:solid;
border-color:green;
font-size:30px }
</style>
<body id="bodyInternet" >
<form name="Form2" method="post" action="main.aspx?B" id="Form2">
<table border="0">
<tr>
<td class="tdLabel">
<span id="ctl16_ID{A}" class="DynamicLabel">
TITLE
</span>
</td>
<td class="tdCheckTablecell">
<table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
<tr>
<td>
<input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
<label for="ctl16_{A}_0">
this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
<label for="ctl16_{A}_1">
ITEM2
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
<label for="ctl16_{A}_2">
ITEM3
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
#sfjedi
I've created a class and assigned the css values to it.
.radioA{
vertical-align: middle;
}
It is working and you can check it in the below link.
http://jsfiddle.net/gNVsC/
Hope it was useful.
input[type="radio"], input[type="checkbox"] {
vertical-align: middle;
margin-top: -1;
}