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()" />
Related
I am looking to disable a few html controls and I am running into cross browser issues with the differences between IE and Firefox/Webkit browsers. The primary issue is evident with the following line:
<input type="text" name="badIE" disabled="disabled" style="color:blue;" value="IE won't show this correctly" />
In IE, the above input would have grey text, while the text is blue in every other browser I have tested. It would appear that IE allows the disabled field of a text input to take precedence over the CSS rules for the text color. Is there any established best practice or IE CSS hack to address this type of issue?
According to the upvoted (but not accepted) answer here, you're kind of stuck with using 'readonly'.
Just out of curiousity - why are you displaying text in a textarea that you don't even want your users to be able to focus on? Seems to me you'd be better off displaying that in a regular text HTML element (e.g. <p>).
It turns out that there are few different ways to attack this problem but there isn't one exact answer. In order to provide the most complete answer possible, here is a list of the possible solutions.
Accept the differences between browsers and continue using the disabled field. This is probably the right answer. As chipcullen suggested on his comment, there is rarely a necessity that all browsers look identical. It is better to simply accept the differences between and work with them.
Use the readonly attribute instead of disabled. The problem with this method is that a user can still interact with a readonly control. For example, users could focus on the control or stick a blinking cursor in the middle of the text. If interaction is a major concern, you can always shield the disabled control behind an invisible element, although that method is on the hacky side.
The option I chose was to replace the input elements with a pure text element. Although this method might not be as straightforward as it might sound. My page was interactive and certain elements would be enabled/disabled depending on client side actions. In order to handle the transition, I threw together the following Javascript (after chipcullen's suggestion and with the help of jQuery):
function disabledToSpan() {
$('input[type=text]:disabled, textarea:disabled').replaceWith(function () {
return $('<span>' + $(this).val() + '</span>').attr('class',
$(this).attr('class')).addClass('disabledTextInput');
});
}
In summary, this will find all disabled text inputs and textareas, switch them to spans while preserving both their values and classes, before finally adding a disabledTextInput class to specially stylize the disabled elements.
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
I'm working on an HTML page where we would like the input fields and select dropboxes to have a border around it as it is tabbed through and in focus. I've defined an input class within my CSS like so:
input.highlight:focus {
border: #003366;
border-style: solid;
border-width: 2px;
}
The input field is defined within my HTML file like so:
<input class="highlight" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
The focus seems to work fine in Chrome, but in IE the focus remains on one of my buttons no matter what I do. The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through. What might be the cause of this problem?
From another thread, someone was able to point out that the :focus attribute is only recognized in IE9. This explains why the jsFiddle version works properly. When running the HTML file from my local drive, however, IE9 runs in compatibility mode for IE8 and lower and the :focus attribute is never recognized.
Have you tried to set the tab index attribute to the page elements. This property is supported by all major browsers. Supporting Browsers are : IE, safari,firefox,chrome.
" The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through."
If i understand your question clearly then you have an issue while tabbing from one element to another right?. If that is the case the tab-index with increasing index value(or any order) will let you to select next elements while tabbing based on the tab-index set up, and the DOCTYPE Tag specifies the rules for the markup language, so that the browsers render the content correctly. Of course the changes in the Doctype tends to changes in the page. Have a quick look on w3 schools about doctype, Hope it may spot some light.
Cheers,
Arun
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.
I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.