So, I'm using a select bar in a site of mine. I'm trying to change the background color of the options when hovered over. Also, if anyone knows a good way to style the vertical slider, that'd be awesome.
Here's a fiddle of what I'm trying to do:
http://jsfiddle.net/zof9suLz/
<select class="scrollbar" name="mydropdown" onchange="document.location = this.value">
<option value="#">Search by State</option>
<option class="scrollbar-option" value="http://alabamaadoptivefamilies.com/">Alabama</option><br />
The odd thing is that when you go down the list using a scrollwheel, and land on an option, the correct color comes up until you move your mouse again.
I just need to change the background color when you hover over the options, but I can't get it to do what I want, haha.
My site url is: statesites.wpengine.com
What you describe seems to me like perfectly valid behaviour, all the time I saw select in any webpage it behaved like that, i.e. background color on option being hovered over after scrolling only changes after moving the mouse. Just to verify I tried the demo on w3 pages (try it yourself) and added more options for scrollbar to appear - it results in the same behaviour, it is for sure not caused by conflicting styles.
As for customizing the scrollbar style, that appears to be a duplicate of this SO question, quoting the most upvoted answer:
Scrollbar CSS styles are an oddity invented by Microsoft developers.
They are not part of the W3C standard for CSS and therefore most
browsers just ignore them.
Related
What is the background effect that appears on tap? In a webpage some <a>'s have a visual feedback when tap, but some others don't. On chrome for android it happpens in the form of a blueish background color for a few miliseconds.
Whatever it is, It's similar to :active, but not quite. As it seems not to be defined (as I checked in the inspector) and it only happens on tap (not desktop click).
Is there a way to make every element have it? The inconsistence is annoying.
From what i understand, given not much context, you'd want to reproduce the "ripple" effect. Which is like having some sort of wave of changing color from the position of the click.
I would suggest this tutorial to learn more how the effect is done in plain CSS.
http://www.cssscript.com/android-l-ripple-click-effect-with-javascript-and-css3/
I realized this is just the default styling that happens on the mobile browser for <a> elements.
The issue here was that the dimensions of the appearing box weren't matching those of the <a> element, but those of its inner (event target?) element.
In other words, in a given <a><i class="fa fa-icon"></i></a>. On tap, instead of getting a highlighted <a>, I was getting a highlighted <i>.
In the current version of Chrome 36.0.1... there's an annoying bug where the dropdown arrow is always black, making it useless if it's in a container with a quite dark background.
The select element's color attribute isn't applied either (though it works on the text of the closed element itself), nor is the inherited color. My searches always came up either useless or with tutorials to replace the whole thing, but that would be overkill.
Since there's a ton of legacy selectors still present to style elements like the scrollbar, is there also one to just define the color of the arrow without having to replace everything but the damn kitchen sink?
Thanks in advance for your replies.
Unfortunately, there is no simple way to change the default select menus without completely overriding them. The individual browsers all render forms differently, and this is a known pain-in-the-ass.
I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
I've been experiencing a strange issue.
I've made these buttons using div tags, they have rounded edges and the color of their borders is defined in CSS. To make them point to somewhere I surrounded them with <a> tags. The problem is, when the link points to something previously visited, the divs border turns white. Normally, I'd just inspect the element in Chrome to see which CSS rule does that but as soon as I navigate to that element, the border fixes itself to the color it's supposed to be.
This happens in Chrome but not in IE or Firefox.
Also, I'm using Joomla 1.5 and Artisteer to make the template (although I did modify it a lot).
As a temporary solution I used onclick JavaScript linkage to make the button work but I don't think that would go too well with search engine crawlers.
Do you have any ideas what could be wrong?
In chrome developer tool you have options to view elements on hover etc. If you haven't assigned styles for a:active, a:visited etc you should. If you'd like more help please post your code into jsfiddle