I'm having this problem where I need to place a Label on top of an input element. The below image uses background images to do the trick but I want to do it with a label. Or a span maybe! I tried with may google links where CSS3 styling tutorials but found nothing. All of them are using images to place icons. I want to place a span/label with text in it.
As in the above image How can I place a span or a label in the way the icon is positioned. any ideas.
Do you mean something like this?
Demo
<div>
<label for="test">L</label>
<input type="text" id="test" />
</div>
div {
position: relative;
}
label {
position: absolute;
left: 5px;
}
input[type=text] {
padding-left: 15px;
}
Related
My code looks like this:
<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">
</div>
.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;
}
So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.
As you can see the checkbox has no label and I would like to achieve the goal without a label.
I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.
Can you use Javascript/jQuery?
You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:
$('#img1').click(
$('#img1-checkbox').attr('checked', true);
);
Or something like that.
This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.
If you want to expand the checkbox size, then try this:
.hovereffect input[type=checkbox]
{
width:100px !important; //adjust as per need
height:100px !important; //adjust as per need
}
This will increase the clickable area of the checkbox field. Working Link
But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.
I'm waiting to see someone prove me wrong with working code.
This html needs to display the radio icon to the left of the label but it is above it.
Chrome (left image), firefox 45.0.1 (right image)
The reason I nested the input in the label because the code needs to make the label clickable "clicking the label activate the radio button as well"
How can I get it to display correctly in all browsers? Thanks
.radio-label {
float: left;
}
<label class="radio-label">
<input type="radio" name={{group}} checked={{value}} value={{name}}>{{caption}}
</label>
You can try this:
<label class="radio-label">
<input type="radio" name={{group}} checked={{value}} value={{name}}>
<div>{{caption}}</div>
</label>
and styling like this...
.radio-label {
width: 200px; // you can modify this as per your needs...
}
.radio-label, .radio-label input {
float: left;
}
.radio-label div {
overflow: hidden;
}
display:inline-block property doesn't mean that you are forcing element to come on left it just means you want element in single line. Use float left which actually mean to left align a element
.radio-inline {
float: left;
}
You just try with,
.radio-inline {
float: left;
}
I think you have to pack both in a div and then align one item to left and other on right i.e radio button to left and label to right.
give a specific width to outer div and give 50% to each item
I have a textbox and checkbox next to each other, my problem is the checkbox goes to the next line:
<td><div class='allDropdown'><input type='text' class='vendorDropdown' /> <input type='checkbox' class='checkbox' /></div></td>
I am trying to get them next to each other.
Here is my CSS:
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
float: left;
}
I have a very long table and I am also using bootstrap, when I try to decrease the size of the textbox, the td just gets smaller and the checkbox goes to the second line
you can position your text box as absolute so it will stick in any side you want
try this..
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
position:absolute;
right:<x>px;
top :<x>px;
}
Yes, actually that code seems about right. It's not rendering the two inputs in different lines. Can you show more code please? There might be some bootstrap styling going on there. On the other hand, instead of floating them, you should always try to change the way the box is being displayed instead of taking it ouf of the frame with the float; have you tried with display:inline-block for both?. Does the table have any styling going on that might be adjusting the size of the TDs?
Let's have a label element with the for attribute specified properly. This label will later have some action bound on click event, so we want to change the label's appearance on hover to indicate the option to click it.
However, if you open IE 10/11 and put your cursor over the label's corresponding input element, the label's :hover pseudoclass will activate!
I tried floatng the label and input and setting position: absolute.
The only solution I could find was to change/remove label's for or input's id so they wouldn't be connected to each other. But this is not a good solution, since it disconnects these two elements semantically and will probably lead to issues with screen readers. Is there any other way to resolve this bug?
JSFiddle: fiddle
JSFidde with broken for-id link: fiddle
You don't have to use "for" at all if you change your HTML structure a little bit. And yes, label and input are still "connected".
<div>
<label>
<span>label</span>
<input id="test" type="text">
</label>
</div>
Here is example: http://jsfiddle.net/Vq8kN/8/
if you want you can get your goal with 2 lines of jquery (I don't know if you can use it)
working demo
$("input").hover(function(){
$("label").removeClass('hovertest');
}).mouseout(function(){
$("label").addClass('hovertest');
});
css
div {
margin: 1em auto;
width: 300px;
padding: 0.2em;
border: 1px dotted black;
}
label {
padding: 0.2em 1em;
}
input {
width: 200px;
}
.hovertest:hover {
background: #ccc;
cursor: pointer;
}
html
<div>
<label class="hovertest" for="test">label</label>
<input id="test" type="text"/>
</div>
How do I create a similar “search” element to the one in this site?
If we view source, he has one textbox followed by a <span> tag.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
Where do I get a similar "magnifying glass" image?
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.
What you need to do is add a wrapper div around the input:text and input:submit.
The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.
It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.
You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
.search {
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"] {
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"] {
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
If you view the page in Google Chrome, right-click on the search button and select “Inspect element”, you’ll be able to see the CSS used to achieve this effect.
If you’re not familiar with CSS, I thoroughly recommend ‘CSS: The Definitive Guide’.
A site like Iconspedia has a number of free icons that are similar.
Wherever you get the icon be careful to ensure that you have the rights to use it in your application. Many graphics are protected and some have restrictive licenses.
If you use a background image on the field then there's no way to bind to it to get the click action. So the solution is to have a separate search field and image, so you can bind click event in jQuery to the image. Fiddle here:
http://jsfiddle.net/Lzm1k4r8/23/
You can adjust left: position to be left or right side of the search box.
To help with user feedback why not add the pointer icon to your mouse when you're hovering over the magnifying glass? Just att this to your CSS:
.search:hover {
cursor:pointer;
}
I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request.
It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.
For instance:
$('#search-field').iconfield( {
'image-url': 'imgs/search.png', // url of icon
'icon-cursor': 'pointer' // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
$('#search-form').submit()
}
I would love to get some feedback on my work.