I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
EDIT 1
I want to do this because i am using the jquery plugin Tag-it and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
You can also override the default Bootstrap setting to use your own colors
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
input.simplebox:focus {
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
sets to bootstrap unfocused style
After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.
input.form-control,input.form-control:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
if you think you can't handle the css class then simply add style to the textfield
<input type="text" style="outline:none; box-shadow:none;">
Go to Customize Bootstrap, look for #input-border-focus, enter your desired color code, scroll down and click "Compile and Download".
this will remove the border and the focus blue shadow.
input.simplebox,input.simplebox:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
http://jsfiddle.net/pE5mQ/64/
On bootstrap 3 there is a small top shodow on ios, could be removed with this:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret; /* mobile firefox too! */
}
Got it from here
Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.
input:focus,
textarea:focus,
select:focus {
outline: 0;
box-shadow: none;
}
HTML
<input type="text" class="form-control shadow-none">
CSS
input:focus{
border: 1px solid #ccc
}
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
So far none of the answers helped me out in this thread. What solved it for me was
/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary,
.btn-primary:focus {
box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}
Related
I created with following stylesheet:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 14px 14px rgba(80, 75, 75, 0.295);
border: solid 4px transparent;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 14px 14px #fff;
border: solid 4px transparent;
border-radius: 10px;
}
/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
display: none;
}
a custom scrollbar with white track and colored thumb and some spacing through the border and box-shadow settings.
This is looking well when the background of my current section of my dom-element have the same background color than my html background color. As this is not allways the case i want to set the scrollbar background color dynamically.
How can i set the background color from the
::-webkit-scrollbar
through javascript?
I am trying to custom the md-virtual-repeat-scroller with a cross browser solution without jQuery.
I learned that the angular-material team won't implement it : scrollBar: customize scrollbar UX per Material Design specifications. #5064
Is there someone who achieveed to do it ? For the moment I use this CSS solution using webkit but it's not supported everywhere.
.md-virtual-repeat-scroller::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: $grey;
}
.md-virtual-repeat-scroller::-webkit-scrollbar
{
width: 6px;
background-color: $grey;
}
.md-virtual-repeat-scroller::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: $primary;
}
Thanks.
I'm using Select2 to style my <select> boxes, but I can't seem to style the forced outline which Chrome applies to the style:
Problem:
I've tried several lines of (very unprofessionally, !important) CSS code, but so far I haven't come up with the solution, this is what i'm at right now:
CSS:
.select2 > *:focus, .select2:focus .select2 > *, .select2 {
outline-width: 0px !important;
}
For the sake of excluding potential problems, i'm definitely including this CSS file, after my regular select2.css
Also, a fiddle would be problematic, but I could provide one if really necessary
This seems to do the trick:
<style>
.select2-container *:focus {
outline: none;
}
</style>
Here is a plunk.
This works for me:
&.select2-container--focus {
outline: none;
}
That's because neither select2 or chrome use the outline property. Here is the actual definition of select:focus pseudo element in select2 (+bootstrap):
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Try changing border and box-shadow instead :
.form-control:focus {
border-color: unset;
-webkit-box-shadow: none;
box-shadow: none;
}
Hope this helps, cheers.
It using box shadow, not outline, look at the inspector:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
so you need to reset it
I'm writing up some documentation for the keyboard shortcuts for some software. The documentation is in html/css/js. I'd like to have images (skeuomorphic?) of a control and c key instead of just having [ctrl] + [c]. I have seen this done on the web, but I am not finding any solutions with my web searches.
How can I render the Control and C keys as images using HTML/CSS/JS? I am happy to use a third party party library to achieve the effect.
The following CSS will style text wrapped in <kbd></kbd> tags exactly the same as the buttons you see here at StackOverflow.
CSS
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap
}
HTML
<kbd>⌘</kbd>+<kbd>X</kbd><br><br>
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>
Output
⌘+X
Ctrl+Alt+Delete
There are pure CSS options for creating realistic, professional-quality key cap graphics. Google "keyboard key css", for a larger list, but my favorite is KEYS.css: it's super simple to use:
<link rel="stylesheet" href="keys.css" type="text/css" />
...
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>
renders as:
trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});
You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.
This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)
Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/
What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)