Develop Reference

Rotate custom image acting as arrow inside dropdown

I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here.
.headerDropdown {
border-radius: 6px;
border: 2px solid #d4d4d4;
height: 34px;
}
.headerDropdown select {
height: 34px;
line-height: 34px;
padding-left: 10px;
padding-right: 5px;
margin-right: 20px;
font-size: 16px;
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
width: 100%;
background-position: 98% 50%;
background-color: white;
text-indent: 0.01px;
text-overflow: "";
transition: 0.2s;
}
.headerDropdown select::-ms-expand {
display: none;
}
.headerDropdown select::-moz-focus-inner {
border: 0;
padding: 0;
}
.rotateCaret {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).
$("#mainnavigation").on("click", function() {
$(this).toggleClass("rotateCaret");
});
My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.
Thanks in advance!
PS. Ignore my poor choice of image, I used it only as an example.

Add another element for the caret and rotate it separately. You can create a custom CSS animation and manipulate it as you wish.
https://jsfiddle.net/johnniebenson/xajzuxn4/

Remove shadow border on IE9

I have a issue on IE 9. I use the attribute:
border: 2px solid #ffffff;
but on IE 9 it does not show properly. Another browser (Chrome, FF) is OK.
Why does the shadow appear on IE 9 ?? This is demo http://jsfiddle.net/rdqm4wns/. Please, run it on IE9

This is a rendering bug causing leakage of the radius into the border width.
Add this rule will resolve it: background-clip: padding-box;
.btn-radius {
border: 2px solid #ffffff;
background: #444444;
width: 25px;
height: 25px;
border-radius: 6px;
text-align: center;
position: relative;
background-clip: padding-box;
}

If tooltip have long text arrow goes down (bootstrap)

I have default bootstrap tooltip with custom styles for arrows that have only font color and size, nothing special with paddings or margin.
If I have short text - it's ok:
If it's a littile longer - arrow goes down through the tooltip:
another common problem - if tooltip position is near the end of the page/window:
There are the same styles for each tooltip.
I've tried to fix it by different ways based on answers from stackoverflow, but it wasn't helpful.
Please, help me to understand this strange behaviour. What style should I use for arrows to make it fixed at the border of tooltip?
PS: another detail - if I will swap "hide people" and "show feedback" tooltips - it becomes ok. So, probably it depends on tooltip position too.

This what I expected!
Can you try it? and post your after/before pseudo code
reference
http://cssdeck.com/labs/pure-css-tooltip-with-arrow
.tooltip:hover:before {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:after {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}

Thanks to #Youness,
max-width exactly for main .tooltip class is helpful.

Overlay Not Showing in IE8

I'm showing and hidding a div using its visibility in css. It works fine in every other browse except IE8 & 9 and I can quite figure out why. From looking at this, can anyone possibly give an answer?
HTML
<div id="action-panel">
Show mne
</div>
CSS
#action-panel {
position : fixed;
height: 80%;
width: 300px;
background-color: #EEEEEE;
right: 10px;
visibility:hidden;
display: block;
top: 10%;
overflow:scroll;
padding: 10px;
z-index: 1000;
border-color: #000;
border-width: 1px;
border-style: groove;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
And the javascript
$('#action-panel').css('visibility', 'visible');
Seems like it should work unless I am missing something back

JQuery UI Tabs Not Displaying Correctly - Internet Explorer

I'm trying to get started with Jquery UI tabs and I'm running into an issue with the demo they have on their site. It runs fine for me on the site itself, but when I download the source and all the other files to run it on my machine, it initially renders correctly like this:
but when i click on any of the other tabs, they render like this:
Clicking the leftmost tab always makes things look correct, but clicking the other tabs cause the lines I have circled not to be rendered. It works fine for me in Firefox and Chrome.
Has anyone else seen something like this before?
I'd be really grateful for some advice.
Thanks,
-Mark

I found the issue. Its in the JQueryUI CSS. Its defining the .ui-tabs .ui-tabs-nav li elements like this:
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
when it should be
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em -1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
i.e. 1px should be -1px for the margin