Testing my application on different browser the styling of a check box doesn't seem to be easy or very nice..
On chrome you get a slight orange box round the checkbox.
But when setting things like background or border and running my application on my blackberry. It makes no difference.
My check box is simple like this
<label for="chk">Checkbox</label>
<input type="checkbox" id="chk"/>
How hard is it to bold the checkboxes label when the checkbox is in focus?
My aim is basically, normal check when not focus, some kind of effect that user knows when its focused e.g. Bold Label, Border anything?
This must work on chrome + blackberry web browser and web works...
Also confused why the check box styling is strange compared to everything else...
Thanks :)
Check these out:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://cssdeck.com/item/321/css-checkbox-styles
Related
When I am hovering over an HTML label the mouse pointer changes to a hand image which we generally get when clicking a link. How can I avoid that?
The reason why you might get a hand cursor in some browsers, is because one of the main purposes of a label element in most browsers is to provide a clickable description for a form input element. For example, this is a typical use of the <label> element:
<input type="checkbox" name="TermAgreement" id="TermAgreement" />
<label for="TermAgreement">I agree to these terms</label>
In most browsers, this will result in the text "I agree to these terms" being clickable. When you click on the text, it will toggle the checkbox with an ID of TermAgreement, just as if you had clicked on the check box itself.
(Note: The W3C specification for <label> in HTML 5 doesn't require this behavior, but it does say that the browser's implementation of <label> "should match the platform's label behavior". In practice, this usually means <label> elements are clickable.)
So essentially, the cursor behaves as though the <label> is a link because it is a link, of a sort. If you're using it differently, you might want to consider using a different HTML element instead.
Whether or not a particular user sees a hand cursor when mousing over a label will vary depending on their OS and browser. Chrome and Firefox aren't displaying this behavior for me on Windows XP, but other platforms might. Also, it's possible that you have a CSS file included which specifically calls for this behavior. There would be a rule in your CSS that looks something like this:
label {
cursor: pointer;
}
If you want to override the element's default behavior, you can use cursor: default; in your CSS, as #rickyduck said. You can find information on the CSS cursor property here. Note that changing the cursor will not necessarily mean the element won't respond to being clicked.
If this doesn't solve your problem, please provide us with more information. Sample code, the URL of the page displaying the behavior, as well as which browser you're using would also be good to know.
<label style="cursor:default">Text<label>
I am testing some elements for use in a web page and when using text input boxes it displays correctly in Firefox but when I looked at it in IE the text boxes were unreadably small.
I have linked screeenshots to more clearly explain what I am talking about.
Any ideas why?
Text Boxes in IE
Text Boxes in Firefox
That's weird. I assume you just used:
<input type="text" name="test" value="" />
?
If so, it must have something to do with your CSS file because the HTML will never change.
Try opening your page in Firefox and use FireBug to see the layout properties of the textbox. I guess somewhere you set the font-size to something really small.
Often there are inconsistencies between FireFox, Chrome and (mostly) IE in the way they interpret CSS tags.
It could help if you'd post a link to your webpage so we could check your HTML/CSS code.
Similar to Bing.com's search box, I wanted to make a text box where it looked like there was an image in the text box (i.e. magnifying glass for search engines). Realizing that this is not possible, I decided to make the textbox invisible using CSS, and simply making a blank border around the two. The problem with this approach is that when someone clicks the textbox, an outline of it appears anyway, making hiding it redundant.
How can I make it so that when clicked, the text-box will now show any outline of itself?
I think there are different ways for different browsers.
What i tested so far and it works is with chrome.
html:
<input class="noOutline" type="text" />
css:
.noOutline {
outline:none;
}
In Firefox extra spacing is added around the text value (not just vertical space as would be the case from line-height, but horizontal as well).
Chrome, Opera (has a slightly different line-height issue), and even IE all render submit buttons without adding any extra space.
http://jsfiddle.net/jswartwood/aFCwj/
If you open firebug and hover over the <a> and <input> respectively, you can see that it is not padding, etc.
From the sound of the bug tracker it seems that Firefox puts a "block" inside these form elements?!?! If this is true, why? This makes visual button size very difficult to keep consistent.
After digging through the Firefox source code (layout/style/forms.css) I found ::-moz-focus-inner to be the shadow selector I needed.
I still disagree with mozilla's choice of forcing line-height, but that is another story; in the mean time I may be able to normalize all browsers by setting line-height: normal.
input::-moz-focus-inner {
padding: 0;
border: 0;
}
A working example: http://jsfiddle.net/jswartwood/aFCwj/14/
To answer your original question: I do not believe CSS can successfully style the input submit element perfectly consistent across all browsers.
Every browser renders these elements differently. Explorer's buttons are in keeping with Windows. Safari's buttons are in keeping with Mac styling. Firefox, Chrome, Opera, etc. are going to do their own thing.
When it's important enough for your design that the submit button look the same across all browsers, you would create a custom graphic and make that your button.
Simply replace your submit button code with the following...
<input type="image" src="myButtonImage.jpg" alt="" />
You can optionally use CSS Sprites or JavaScript to swap button images on hover, click, etc.
A button doesn't have to be a button. You can use any other element, like a in your example, or even better span. And bind it click event to submit your form.
Now I know this issue is over-talked about but I cannot seem to find a question that addresses this little gem directly so here goes...
In Opera and IE when a form has focus the default submit input gets some sort of highlight. Like outline is when you have tab focused onto an element.
However, unlike the tab one (dotted lines inside or around which to me is nice and user friendly and so WANT it for my users) this one has some bizarre designs...
Firefox has its own problems but at least you can customise it. It reserves the space for the "highlight"/"border" or whatever you want to call it which means that your input will be bulker than any other browser. - why can't it do what it does for the anchors and have the highlight around the blasted thing?
Opera is odd in itself (Opera 10) since it makes the outline "highlight" whatever black. Now this isn't an issue UNLESS YOU HAVE A BLACK BACKGROUND... and it replaces the original border which is just palmface worthy... what were they thinking.
IE is like Firefox but no known way to customise it..
Now for the question: Is there a way to set the bloody colour in Opera for this focus event (which would solve that issue) or to have it in firefox without having to bloat the design in every other browser or a way to make IE conform at all.
Many thanks in advance
I tried and tried but I don't think this is possible.
button:active{background-color:#f00;}
button:hover{background-color:#0f0;}
That should allow you to control the visual interaction of a button. To target a specific button provide an id value in your HTML on the button tag.
try doing
<input type='submit' autocomplete='off' style='outline:none;'/>
this worked for me in text fields - I'm not sure if it carries over to submit or button elements but it's worth a try.
Kinda hackish, but definitely works..
<input type='submit' onfocus="blur()" />