I am wondering if there is some way to make an box have the Safari's light highlight all of the time. I would assume there would be a way to replicate this, however I have not found one.
Thanks for any help!
If there is a doubling up, you can remove Safari's blue outline with outline:none.
Currently the only way to achieve this would be to use a background image. You'd take a screenshot from the field and use that as the background for the input. The main drawback here is that you can only have a fixed-size field because the image is static.
However, you may wish to take advantage of some CSS3 styles such as box-shadow which will work in Safari, Chrome and Firefox. Take a look at this page for more info. For your example you'd probably want something like this:
box-shadow: 0 0 4px #aaf;
One final point to make - if you replicate Safari's highlight outline, it's very likely Safari itself will "double up" the effect, so you need to be careful...
Related
There's possibly no straightforward solution for this, but any suggestions for a workaround or pointers to some documentation of this issue/ behavior is welcome.
Scenario:
If I apply a custom on-focus CSS style, such as:
:focus {outline: 2px auto green; }
Issue:
Parts of the outline still show on the previously active links even after focus moves away.
In the screenshot, the last link with the green outline is the currently active element. The rest of the links with small green lines around were active only previously.
These remaining bits of the outline go away after a few seconds on their own or when you drag the mouse over them (or disturb that area of the page in some other way).
Context:
I am working on a chrome extension for accessibility, and I need to set an explicit style to the active element. The reason I am hoping to use outline-style:auto is that 1) applying any other style except auto (like "solid", "dotted" etc) give another issue and 2) also, it looks better.
I am aware that outline-style:auto is not supported by other browsers.
Using Chrome 27.
You might check to see if an outline-offset is being set.
I had a similar problem, I was using Bootstrap and it was setting:
a:focus {outline-offset: -2px;}
Doesn't sound like you're using Bootstrap, but maybe something similar is happening for you. I changed it back to the default:
a:focus {outline-offset: 0px;}
that seemed to work for me. Hope this helps!
(Warning, outline-offset is not supported in IE: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp)
I had the same issue. In my case, I set an outline and a box shadow. Both seemed to stick to the element.
When I added the outline, I also set the box position to "relative" to make it stand out. For some reason that I can't explain, giving the box a z-index of 1 (bringing it forward) when I set the position to relative completely fixed this issue for me.
I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...
I applied "border-bottom:#F60 dotted .3em;" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?
If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:
The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.
As a graphic designer, this is indeed a problem for me.
:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met.
to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.
For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.
Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .