I'm using Twitter Bootstrap 2.0 and I was wondering how to change the select boxes so they have the same awesome blue glow that text boxes and other form elements do.
Right now all of the form elements I have is blue when focus is put on them, except the select boxes. I noticed that even on http://twitter.github.com/bootstrap/base-css.html#forms when I put my focus on the select boxes they glow orange, so maybe it's not built in yet. Has anyone else had to deal with this, or know how to fix it? Thank you!
1) Add following lines to bootstrap.css file
.shadow_select {
-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);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.shadow_select:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
}
2) Then apply shadow_select class for select tags
<select class="input-small shadow_select">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
</select>
This works on all other browsers except webkit. for webkit wrap select using div. Then use jquery to detect focus event on select and apply CSS shadow class to that div. (Because focus event can't be applied to a div
Building on Sachindra's this jsfiddle illustrates how to do this in webkit (Chrome, Safari) browsers.
Incidentally Sachindra's class attribute in point 2 is spelled incorrectly, which threw me for a bit (shadow_slect -> shadow_select)
If you're using Compass you can grab the these mixins https://gist.github.com/2919841
and then use them as like so:
#import "compass-bootstrap-box-shadow"
shadow_select
#include bs-box-shadow
&:focus, &:hover
#include bs-box-shadow-focus
I'm brand new to Sass and Compass, so if you have any improvements please don't hesitate to let me know.
If you are using Sachindra's answer above, it might not work correctly in webkit or other modern browsers.
For that you just need to include these two tags in the " .shadow-select:focus " element. This worked for me.
border-style: solid;
border-width: 1px;
Related
I'm attempting to highlight a div using transition & box-shadow.
transition: transform .8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
I get it to function in Chrome but not IE. What do you suggest?
---
Update May 1st, 2020
---
I narrowed down my problem. If I change the display to block or table it works but by default the element is a table-row. When I change the display it works but throws off my styling. Any particular clue what the difference between "table" and "table-row" displays?
try to use this following code :
transition: transform .8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
-webkit-transition: transform .8s ease-in;
-webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
If you remove the transform from the line below then it will work in IE 11 browser.
transition: transform .8s ease-in;
Test code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition:.8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Test</div><br>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Output in IE 11 browser.
If the issue persists then please try to inform us which version of the IE browser you are using for making this test? What is the purpose of using transform with transition? What exact output do you want to get in the IE browser? If possible then try to provide the sample code with HTML and CSS that we can try to run and test with the IE and other browsers to see the difference in the results.
I have a fixed navbar that I am giving a drop shadow effect. That works fine, however it seems to also be affecting all the text inside and makes the font weight appear slimmer.
How can I make it stop changing the font?
http://jsfiddle.net/dvY4A/1/
HTML
<nav id="nav1" class="dropshadow">Hello World</nav>
<button>toggle drop shadow</button>
CSS
#nav1 {
position:fixed;
width:100%;
font-size:20px;
top: 0;
left: 0;
min-height:20px;
background:white;
}
button {
margin-top:50px;
}
.dropshadow {
-moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
I've found the answer and it involves some issues at the operating system level.
I've updated the solution here: http://jsfiddle.net/dvY4A/5/
All it took was adding the property -webkit-font-smoothing: antialiased; to the #nav1 block.
More details about it can be found here: http://lists.w3.org/Archives/Public/www-style/2012Oct/0014.html
But basically, there are two rendering modes for text, grayscale and subpixel-antialiased. For technical reasons, the browser tries to switch between the two during certain operations like hardware acceleration, which the box-shadow must be using.
I'm still using my workaround just in case but I may set this property at some point.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I found beautiful div borders here:
Demo for nice div border
PLease enter cursor in box. You will see beautiful blue shaded border for div.
How such a nice border can be created? any other reference?
Check this:
input
{
border-radius: .2em;
border: 1px solid #cccccc;
-webkit-transition: border linear .2s, box-shadow linear .2s;
-moz-transition: border linear .2s, box-shadow linear .2s;
-o-transition: border linear .2s, box-shadow linear .2s;
transition: border linear .2s, box-shadow linear .2s;
}
input:focus
{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \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);
}
Basically what is used for the border is a box-shadow on focus. Also they create a transition between the box-shadow for a fade-in effect.
Remeber that you can inspect every element in your browser, thus can view the css code of the element
jsFiddle
More info about box-shadow.
That's box-shadow in CSS3:
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
FYI, if you're using browser like Chrome, you can right click on the element, and select "inspect element" to see the style applied to it.
I'm trying to get a similar effect to the one here (in this case on focus in a form field). However I want it around a small image, and to occur on hover. Obviously I can create two sprites, and in CSS replace the image with the glow image on hover, but this would not include the animation. So currently I have:
img.glow {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img.glow:hover {
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, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
This works, but the problem is that my image has rounded corners and the glow effect occurs around the the image as a whole (i.e. it treats the image as a square, and leaves small white corners within the glow, whereas I want the glow to hug the edges of the image). The image is a transparent PNG. Is what I want to do possible?
Just add a border-radius property, so that your img element has nice round corners. The shadows will follow the shape of the element.
You know that sexy glow that surrounds an input field whenever it has focus?
Without going into too much detail, I need to recreate that effect outside of an input field, but I can't seem to find the stylesheet that dictates such an effect anywhere.
(I know how to do it, using the outline property and so on. I'm just wondering if there's a way I can find the EXACT values used by default for input text fields.)
chrome has the outline style for inputs as default. i have to disable that rule for many projects.
use the chrome developer tool to see the browser style rules.
see how to do this here:
chrome developer tool info
It is possible to do this via CSS. Have a look at Twitter Bootstrap Forms and how they do it. Click inside any input field.
See a simple working example here: http://jsbin.com/esidas/2/edit#html,live
It's done using CSS3 properties for box-shadow and transition
input[type=text] {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input[type=text]: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, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
The best cross-browser/cross-platform I know of is formalize.
If you're trying to figure out how a particular rendering works (i.e. on Safari Mac), you'd be looking for user agent css. On modern browsers the entire rendering lifecycle is fully parametrized, heavily relying on vendor-specific prefixes and can be made visible with the inspection tools, e.g. on Chrome or FF+Firebug:
That's your browser doing it for you automatically. That's why you can't find a stylesheet for it.
Because it's an effect of the browser and not from a style, you'll need to do it manually. In saying that, keep in mind that each browser does it differently (and I think it depends on the client OS as well). So you'll really only be able to match it if you know the client environment beforehand (possible in a closed network).
You know it is added by the web browser and it depend on the browser and the OS you are using , therefor we can't show you the exact codes. How to find the exact styling may not be difficult, try the 'inspect element' option on an input field, it may show the 'computed styles' by the browser. Else if you can say which browser you use on what OS exactly , we can help you.