I have style my radio buttons with a background image, basically what i have done is
<input type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;">
<label for="btn">My Text</label> <!--- added styles to it --->
with this i get output something like this
Image1 that shows how the display should be: http://i39.tinypic.com/2vcyidg.png
It works fine in every browser except ie8, in ie8 it shows a dotted box around hidden buttons when a label is selected
Image2 shows the problems in ie8: http://i39.tinypic.com/j8l635.png
I cant choose the property display:none; as in IE browsers it disables the radio buttons so i have to hide it.
How can i hide that dotted box in ie8?
Thank You.
Regards,
Shishant Todi.
Is there a reason why you're not using <input type="hidden" />?
if you can use javascript:
<input onfocus="this.blur()" type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;" />
I had a similar issue where my radio buttons and checkboxes were showing borders, but only in IE. In my case, this was a css issue where these inputs were being treated the same as text inputs. I simply defined a new class in the stylesheet and specified a border of zero px.
Related
So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here
i tried display: inline; but still nothing changed
The below code will work as you expected. Just add necessary attributes like name and for.
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes">
<label for="test">Yes</label><br>
According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.
<style>
.inline-radio{width: auto;}
</style>
**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes" class="inline-radio" >
<label for="test">Yes</label>
I used a simple html
<input type="number">
It is showing a text box with up and down arrows but the arrows are not working. The value can be incremented/decremented with arrows on keyboard and mouse scroll, but when I click on any of the arrows, it seems that the down arrow is clicked and the value in the box remains the same. Please suggest what should I do!
Well I'm surprised by this but it looks like a bug, at least in Chrome. (Edge doesn't show the arrows at all and Firefox behaves correctly.)
The mousemove event listener (on the element or the document) breaks the INPUT TYPE="number" if an e.preventDefault() is present:
<input type="number" value="1"/>
$(function() {
$(document).on('mousemove', function (e) {
e.preventDefault();
});
});
See https://jsfiddle.net/MCAU/Lpojfrm2/
Can anyone confirm this?
You can try this:
HTML
<div id="incdec">
<input type="text" value="0" />
<img src="up_arrow.jpeg" id="up" />
<img src="down_arrow.jpeg" id="down" />
</div>
JQuery
$(document).ready(function(){
$("#up").on('click',function(){
$("#incdec input").val(parseInt($("#incdec input").val())+1);
});
$("#down").on('click',function(){
$("#incdec input").val(parseInt($("#incdec input").val())-1);
});
});
After so much of attempts removing JS CSS n all. Come to know that "ember-view" class was creating the issue. I was using ember and the div in which I was using input type="number" was having class "ember-view". Removing that class makes the textbox work good :). Thanks.
Earlier
<div class="ember-view">
<input type="number">
</div>
Now
<div>
<input type="number">
</div>
Try this:
<input type="number" step="1" >
Here in step option give the value you want to increment or decrement to the value.i.e if you set step=0.5 and your value is 5 on click up arrow it will change the value to 5.5
I hope this will work for you
Try it.
input field need focus to increment/decrement value.
<input type="number" autofocus="autofocus">
For me arrows were displayed on desktop Chrome but I tried so hard to restore arrows form mobile browsers like mobile Chrome, I tried many solutions without success.
Eventually I decided to make some nice buttons on the sides of the input. I made the code and you can add as many buttons as you want as long as you respect the id numeration. I invite you to look at the snippet I posted on this other similar post.
https://stackoverflow.com/a/68679616/13795525
Working with a set of radio select buttons and a text input field in HTML.
<fieldset>
<input type="radio" name="amount_choose" id="amountSelection40" value="40.00">
<label for="amountSelection40">$40.00</label>
<input type="radio" name="amount_choose" id="amountSelectionOther" value="Other">
<label for="amountSelectionOther" class="amountSelectionLabelOther">Other</label>
<input type="text" id="amountSelectionOtherField" name="amount_Other">
</fieldset>
I have CSS marking the text input#amountSelectionOtherField as display none. The idea being I only want the text box to show up if the "Other" radio button is checked.
input[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField
{display: inline-block;}
The CSS works in Chrome, Firefox, IE on a Windows machine and Chrome, Firefox on my MAC but not on Safari.
Interestingly enough when I view the page in Safari on my iOS devices it doesn't appear to work either, however if after I have selected the "other" radio button and then do an oration change on my device the text input will appear. If I change the radio selector back to 40, the text input does not disappear until I change my orientation again.
I am NOT using ANY media queries in my CSS file at all. So is this just a quirk of Safari? Any suggestion about how to make this work without having to resort to JS?
I just tested the following in Safari (ver 8.0.2) and it worked fine. I simplified the selection by using a general sibling (~) selector.
input#amountSelectionOtherField{display: none;}
input#amountSelectionOther:checked ~ input#amountSelectionOtherField {display: inline-block; }
Here is a fiddle for it: http://jsfiddle.net/ugnyaLua/14/
Here is an article on the ~ selector: https://css-tricks.com/almanac/selectors/g/general-sibling/
Is there any way to style the tick mark checkbox only by using HTML and CSS3 without using images, like in Google's signin page?
You can accomplish this by using a combination of HTML, CSS and jQuery. See the code I whipped up here to create a checkbox from an <a> tag and style it with CSS.
I've tested this code and it works beautifully in Chrome, FF, & IE 7-10. Haven't tested Safari or Opera...
http://jsfiddle.net/wdews/reXL6/
Just make sure you nest your <a> checkbox tag in <form> tags, give it an ID, a class of "checkbox", and hashtag HREF. In essence:
<form action="#" method="get">
<a class="checkbox" id="myCheckbox" href="#"></a>
-or-
<a class="checkbox checked" id="myCheckbox" href="#"></a>
</form>
Let me know how that goes for you.
This post is old but this is what i suggest:
Associate labels to your checkboxes like this:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes.
Here is the jsfiddle
I'm trying to get an <input /> to line up correctly next to a <button> in IE7.
Ideally, the rendered HTML should appear as: (or similar)
but instead it's appearing as
This is an example of the HTML/CSS I'm using: http://jsfiddle.net/wLpQg/1/
Note how the textbox appears on a different line to the button. This works correctly in all browsers except IE7 (and maybe IE6, but I haven't checked that!)
How can I get this to appear on the same line as the button, preferably as similarly to the first image as possible?
float in the input box to the left, and float button to the right. Then add margins until they're lined up correctly.
If you want the <input> and <button> to always exist on the line below, the easiest way to do this is wrap them in a container, for example:
<div class="search">
<input type="text" watermarktext="Enter share class name or partial name" value="" name="Search" id="Search" class="search-input watermarkOn">
<button id="btnViewResults" type="submit" class="linkButton medium submit"><span><span id="resultCount">View 27090 matches</span></span>
</button>
</div>
with the associated CSS:
.search {
position:relative;
padding:16px 0;
}
.search button {
position:absolute;
right:12px;
}
I ended up commenting out a lot of the CSS in your example, since the container now takes care of the padding and positioning. I forked your fiddle into a new demo to demonstrate. This is working for me in IE6/IE7/IE8 and Chrome 14.