I would like know if is possible disable "focus" which is set by default browser in input elements?
Update
When an input element is in focus, the browser adds a border (typically blue) around it. This is breaking my layout. So I wonder if you can disable it.
Set outline:0; on those elements.
Add this in your CSS:
input:focus {
outline:none;
}
This
how to remove the default focus on submit button in HTML form?
Related
I have a div with a span inside (simplified).
<div class="divDash">
<span>XX</span>
</div>
Based on the below CSS, the span is initially hidden and shows only when you hover over the div.
.divDash {height:300px;width:300px;border:1px solid gray;}
.divDash span {display:none}
.divDash:hover span {display:inline}
Based on some user interaction, I need to hide the span using jQuery...
$('.divDash').children('span').hide();
And then, based on some other user interaction, I need to restore the original behaviour of the span. If I simply show the span again using $('.divDash').children('span').show(); then it is shown permanently and not just on hover.
How can I restore the original CSS behaviour so the span shows only on hover?
Instead of using show and hide, add/remove a specific CSS class that has the behavior you would want.
You can revert to the default behavior by setting display: ''
$('.divDash').children('span').css('display', '');
Demo: Fiddle
I am using Firefox 27.0.1. I have a third party form that I only have acces to its CSS style, and not to the html code.
I tried to remove the dotted border on the submit button using: div.submit input[type="submit"] {outline:none;} but it still appear...
any other way to remove it?
That looks like a focus event, try this:
div.submit input[type="submit"]:focus {
outline:none;
}
Check if you have 'focus' inside your CSS file which focuses the item as a dotted.
Thanks for all answers,
what help me to get rid from the dotted border is:
div.submit input[type="submit"]:focus {outline:none;}
div.submit input[type="submit"]::-moz-focus-inner {border:0;}
I am trying to find a script that would let me do what YP.com does. If you look at the business search input it says Business Name or Category. Then if you click on it, the text fades a little, and when you type words, it fades completely. How would I do this? Any help would be greatly appreciated.
You can have a look at this jQuery example :
http://www.benwatts.ca/2008/07/19/jquery-input-text-replacement/
Declare 2 CSS classes :
.black{
color:black;
}
.grey{
color:grey;
}
The default CSS class for your input can be the black class.
Like in the link above :
Use the focus event for changing the CSS to the grey class
Use the blur event for changing the CSS to the black class
Add the onKeyDown event to delete the original value and change the CSS to the black class.
You could use onfocus to do the first fade. Then onkeydown and fade completely.
I see that the form elements on Facebook are not highlighted when in focus.
how can I do that?
With chrome for example if I click on this textarea it becomes orange or yellow.
input:focus{outline:0;}
Simply change some styles for your form elements and the browser's defaults will not take effect.
.textArea:focus
{
background-color:#FFF;
}
Apply this class to your textareas. Or apply them to all your areas at once:
input:focus
{
background-color:#FFF;
}
For anchor links i want to removes the dotted focus outlines for mouse events, but want to display them when for keyboard tabbed navigation.? Is there any javascript, jquery method?
Method should be compatible all A-grade browsers. including IE6.
Although all pure css methods to remove dotted lines do not works in IE 6.
But remember i want to remove dotted focus outlines only for mouse events, but want to display them when user use keyboard tabbed navigation.
Try to use jQuery/Javascript to apply style when mouseover. That way outline:none; will must likely to apply when it's a mouse click.
CSS:
.foo.bar:focus {
outline: none;
}
jQuery:
$(document).ready(function()
{
$(".foo").mouseover(function(){
$(this).toggleClass("bar");
}).mouseout(function(){
$(this).toggleClass("bar");
});
});
Unfortunately, this brings another problem: IE6 compaitability with multiple classes. This can be solved by using double div techniques to apply style with multiple classes.
While I understand the OP wanted to handle IE6 as well, I've posted this solution for anyone is not concerned with IE6 and who wants to allow keyboard navigation (focus rectangles still appear when tab is pressed) but hide the focus rectangle when the element is clicked (or enter key is pressed).
The .hide-focus-on-click is just a jQuery selector - replace it with whatever selector you need (e.g. "div#nav a" for all hyperlinks within )
CSS:
.no-focus-rectangle {
outline: none;
}
jQuery:
$(document).ready(function() {
$(".hide-focus-on-click").click(function(){
$(this).addClass("no-focus-rectangle");
}).blur(function(){
$(this).removeClass("no-focus-rectangle");
});
});