I have a standard input textbox that I've styled using css and psuedo-class elements Hover and Focus. The css I am using is pretty simplistic:
.riTextBox:hover,
.riTextBox:focus
{
border: solid 1px #F1C15F;
}
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
All is working great except when the textbox has text in it and is selected with the mouse, and as you are selecting the text you leave the bounds of the textbox (with the mouse button still down), and then mouse up somewhere outside the textbox. You will notice that the textbox border is still highlighted as if it never lost focus.
It seems that the onselect event of the textbox is conflicting with onblur, but I'm not sure. See here to reproduce this frustrating issue:
http://jsfiddle.net/pBkhT/7/
Thanks for any help you can provide!
This answer is a little late, but it works for your problem. Simply remove the focus event that is coupled with the hover event. Your original hover border will still remain on focus (when user clicks the box), but when the user moves the mouse away, the hover styling will disappear, even when the mouse button is still down.
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
.riTextBox:hover
{
border: solid 1px #F1C15F;
}
Related
If you click on that image (which is inside a button) an Alertify message pops up. This (the image above) happens when the message closes.
I have this problem wherein the button defaults back to the default button decoration. How do I prevent this from happening? I already tried the outline: none !important CSS element but it still does not work. Is there an "aggressive" way of getting rid of this?
EDIT: I have double-checked on the developer tools already and it seems that the outline CSS code has already applied. However, this problem still persist.
If you are trying to remove the background blue and the border. Try the following styles..
These will add a 1px wide transparent border which will change color to grey when clicked. It will turn back to transparent when click is released.
Also the background blue color will be removed.
button, button:focus{
outline: none;
background: transparent;
border: 1px solid transparent;
}
button:active{
outline: none;
background: transparent;
border: 1px solid grey;
}
I am attempting to skin a Kendo UI DropDownList widget for my own site, and have had fairly good success with a small caveat that is driving me nuts.
I am including a link to a jsBin that demonstrates the issue, and some screenshots. But basically what is happening is that I want the entire dropdown list to be flat (no border radius), and then to be very solid (white background, black text) and the currently selected item to have a thick red bar as its left border (3px in my example), and then as you hover over the items in the list box, their left border becomes a thick greenish/blue bar.
This is working, except for some strange spacing issues; First of all, as I hover over things, they "jump" around. They get pushed this way and that a bit obnoxiously, making it feel non-uniform. I really want to fix that; and the thing that is driving me the most nuts is that the "bar" that I use on the left-border is having a strange curvature to it, making it look very out of place, as if it is almost beveled. Can anyone assist with this?
jsBin Example
.custom-dropdown .k-item {
background: white;
font-weight: lighter;
padding: 0 4px;
border-left: solid 2px white; // add this
}
.custom-dropdown .k-item.k-state-selected,
.custom-dropdown .k-item.k-state-focused {
color: black; // and add this
border: solid 1px white;
border-left: solid 3px #b91d47;
}
I think there nothing to do for strange curvature.
http://www.w3schools.com/css/css_border.asp
http://jsbin.com/elOSuDo/1/edit updated jsbin
We are writing a site for a user cannot use a mouse. He wants to press Tab on the keyboard to move between images and press return to go to the href link associated with that image. We got that much worked out OK.
But how can we highlight the image in some way so he can easily see which image he has tabbed to?
We don't have an jQuery skills so we are trying to keep our coding to html and css
We have the code:
I thought I could introduce a class to change something about the image.
For example, we introduced a class
.classA {border:double;}
and using it
But that didn't work. We tried lots of effects but none of them worked.
Any suggestions as to how we can highlight the image he has tabbed to?
how we can highlight the image he has tabbed to
When tabbing between anchors on a page, that element gains "focus" - using the :focus pseudo selector, we can therefore restyle images that are inside an anchor that has been tabbed to with a:focus img - for example:
a:focus img {
border: 1px solid #F00;
}
Though adding a border could break layouts - you could instead do something like:
box-shadow: 0 0 10px #F00;
To give it a red glow - making it obvious, without affecting the layout of the elements.
Remember that by default, the browser puts on an outline.
Try:
img:focus {
outline:none;
border:2px solid #ABCDEF;
}
I'm playing around with a firefox extension written in XUL, and wanted to customize the style of a textbox element.
Here is what I've come so far (CSS file) :
textbox.custom-style {
-moz-appearance: none;
border-radius: 3px;
box-shadow: 0 1px #CCC inset;
background: #FFF;
border : solid 1px #CCC;
}
The style applies correctly but when I've added this rule to alter the style a focused textbox, it doesn't seem to work.
textbox.custom-style:focus {
border : solid 1px #ACC;
}
I've tried the same rules for a button element and it seems to work OK (when I 'tab' to the button, it gets focus and change its style as expected)
So what am I missing here? Is this a known bug? I've looked around for a bug report or a workaround but to no avail.
For <textbox> element, a special attribute focused is added whenever the element has the focus. You can check for the presence of this attribute to determine if the element has the focus within a style sheet. It will have the value true.
This is because actually focus is in <html:input> element which is inside <textbox> element.
I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
Thanks.
Another option you can use (tested on galaxy S running android version 2.1-update1):
select {
-webkit-appearance: listbox;
}
select, input {
width: 100%;
height: 40px;
line-height:40px;
border: 1px solid #999;
border-radius: 6px;
margin-bottom:10px;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issue and suggest a workaround with a custom background image for now:
<select style="background: url('big-select-bg.png')"/>
try this one:
select{
-webkit-appearance: menulist-text;
}
Set the opacity of the select control to 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
Make sure the dimensions of the span and the select control line up well.
(Do not use an actual texbox control)
mealaroni.com
For me "-webkit-appearance: listbox;" solved the issue not completely.
I had to add a padding attribute additionally:
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}