We Keep Coding

CSS outline around input element in the form

Does anyone know, is it possible to show outline around input element when user is using sequential navigation (TAB button) and hide outline when user clicks this input element with the mouse? Has anyone implemented this kind of behaviour?
I`m using this property on my :focus selector in CSS file:
:focus {
outline: #00bfff solid 1px !important
}
Currently, outline appears when input element is focused.
BR,
Raimonds

Just blur it on click.
jQuery(document).ready(function() {
jQuery('input').on('click', function() {
jQuery(this).blur();
});
});
This should remove the focus from the input when clicked, thus un-triggering your css rule for :focus, while it will still be applied if your input gets the focus by keyboard navigation.
Edit: Just tried it in Chrome/Windows 7, it doesn't seem to achieve what it is supposed to.
If someone wants to give it a ride to find a working solution, here's a pen:
http://codepen.io/anon/pen/yNMoJv

Here is a fiddle https://jsfiddle.net/hyauyovm/2/
Hope it solves your problem
//HTML
<input>
<input>
<input>
<input>
//JS
<script>
$("input").click(function(){
$(this).addClass('focus');
});
$("input").blur(function(){
$(this).removeClass('focus');
});
</script>
//CSS
input:focus{
outline:2px solid blue;
}
input.focus{
outline:none;
}

you can do this either in js or css for js you have to use blur or in css you can use :focus. Here is an example of both.
using css
using css in fiddle
using js
using js in fiddle
for your case use this
Fiddle

Try this,
input:focus {
outline: #00bfff solid 1px !important
}

Easiest way to make disabled button look disabled with jQuery

When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );

Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle

I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}

it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/

Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}

The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}

toggleClass/addClass doesn't work with input

I have an input element:
<input id="box" type="text" />
And the following CSS class:
.box-change
{
border-color:#ffffff;
}
As well as the following jQuery code:
$('#box').toggleClass('box-change');
However, it doesn't change the border color as I expect it to. Does anyone know why?
Edit:
The input already has a style, it is thus:
#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}

If you've originally removed border, then you'll have to set
border-width
and
border-style
So in short your CSS should look like:
.box-change
{
border: 1px solid #fff;
}
But it all depends what your initial style is, what colour is background of the containing element of your input etc...
Edit after you've provided more detail
your class doesn't get applied because class that sets style by ID has higher priority in cascade than CSS class. That's the main reason why you're not seeing it applied.
If you'd like your CSS class to take over you have two options:
set it as important:
.box-change
{
border: 1px solid #fff !important;
}
provide CSS rule that has higher specificity and will take over
#box.box-change
{
border: 1px solid #fff;
}
The second way is the preferred way, because using !important will make your CSS harder to maintain, since your classes don't cascade as per CSS but rather as per your importance. And you can easily loose control over that. Avoid important unless on seldom occasions.
How to troubleshoot this?
To help you in the future, you should be using developer tools in browser (Chrome DevTools or Firebug for Firefox) that would immediately show you the problem. And of course understand CSS specificity rules and how they cascade.

As your original styles are defined with #box it is more specific than .box-change, and by default overrides your new additions. It could also be that .box-change is higher up the cascade than #box.
You could solve it one of two ways:
#box.box-change{
border-color: #fff;
}
or
.box-change{
border-color: #fff !important;
}

Disable html input element by applying custom css class

I want to disable my all input element of a div by applying my custom css class.
but i could not find any css attribute which can disable an input element.
currently what am i doing
$('#div_sercvice_detail :input').attr('disabled', true);
$('#retention_interval_div :input').addClass("disabled");
which can disable all input element of div with css attr but i want to apply my custom class for disable all input with some extra css attributes
$('#retention_interval_div :input').addClass("disabled");
class
.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}
any suggestion for doing this with jquery without using .attr('disabled', true);?

There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:
<style>
#retention_interval_div​​ input[type="text"]:disabled {
color : darkGray;
font-style: italic;
}​
</style>
Then in your code you just have to say:
$('#retention_interval_div :input').prop("disabled", true);
Demo: http://jsfiddle.net/nnnnnn/DhgMq/
(Of course, the :disabled CSS selector isn't supported in old browsers.)
Note that if you're using jQuery version >= 1.6 you should use .prop() instead of .attr() to change the disabled state.
The code you showed is not disabling the same elements that it applies the class to - the selectors are different. If that's just a typo then you can simplify it to one line:
$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);

You can use following css to practically disable the input:
pointer-events: none;

Using normal CSS
.disabled{
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}

No. CSS can't disable an input element. CSS is for styling only, it can't do anything else. Also, input will only work with input, don't forget select, textarea, password

You need to do 2 things, so why not wrap them in a single function? You could even create a little plugin to do this:
(function ($) {
$.fn.disableInput = function () {
return this.each(function(){
$(this).prop('disabled');
$(this).addClass('disabled', true);
});
}
})(jQuery);
Then you can call it like this:
$('#myInput').disableInput();
...and even chain it with other stuff, like this:
$('#myInput').disableInput().addClass('otherClass');​

You can't disable input elements using css properties. But you can improve your current coding like following
$('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");

How do I remove the border around a focused contenteditable pre?

When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else.
How do I remove that border?
Thanks

Set the outline property to 0px solid transparent;. You might have to set it on the :focus state as well, for example:
[contenteditable]:focus {
outline: 0px solid transparent;
}

You can also add the :read-write pseudo-class to style elements that are editable.
For instance (jsFiddle):
.element:read-write:focus {
outline: none;
}
Read more here on codrops.
The :read-write pseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS.
It is supported with the -moz- prefix in Firefox in the form :-moz-read-write.
The :read-write selector is not supported in Internet Explorer and on Android.

Never remove built-in focus styles without providing a replacement, this feature is essential for millions of people who are using the web without a mouse.
An example of good advice on this topic from the HTML Living Standard (
https://html.spec.whatwg.org/multipage/interaction.html#element-level-focus-apis):
[in order to hide the focus ring] use the :focus-visible pseudo-class to override the 'outline' property, and provide a different way to show what element is focused. Be aware that if an alternative focusing style isn't made available, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.
For example, to hide the outline from textarea elements and instead use a yellow background to indicate focus, you could use:
textarea:focus-visible { outline: none; background: yellow; color: black; }