Menu
i tried to google style input box . but i stucked at input:focus. code is below http://jsfiddle.net/GmgUZ/
input:hover{
border-bottom-color: #B9B9B9;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #B9B9B9;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #B9B9B9;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #A0A0A0;
border-top-style: solid;
border-top-width: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
input[type="text"]:focus {
border:1px solid #4D90FE;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
}
Any insight would be greatly appreciated!
615
Maybe you are calling the JavaScript before the input element is rendered? Position the input element before the JavaScript or wait until the page is loaded before you trigger your JavaScript.
To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.
The reason that's not working is simply because it's not stealing focus from the dev console. If you run the following code in your console and then quickly click in your browser window after, you will see it focus the search box: setTimeout(function() { $('input[name="q"]'). focus() }, 3000);
To detect if the element has the focus in JavaScript, you can use the read-only property activeElement of the document object. const elem = document. activeElement; The activeElement returns the currently focused element in the document.
Use input#gText:focus instead of input[type="text"]:focus and add outline: none;
input#gText:focus {
border:1px solid #4D90FE;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
outline: none;
}
demo:
http://jsfiddle.net/GmgUZ/1/
52
You have a CSS Specificity problem, what does this means? It means that you have some rule styling that wins over your "input[type="text"] selector, if you really need your selector to win you will need to specify that this styles are more important than the others with the keyword "!important" at the end of each style, try it:
input[type="text"]:focus {
border:1px solid #4D90FE !important;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
outline: none !important;
}
This is not a hack is in the css specification, but if you left this style like that you will regret one day, because you don't have a good specificity, and any rule that you try to apply to this element for example this rule will win over a rule with the id of the element, for example "#my_input_type_text" or class selector ".my-input-text"
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
