Chrome Version 16.0.912.75 m running on Vista.
I'm trying to apply an rgba background colour to a disabled select element, with the opacity at 0.2.
It works fine in Firefox and Opera, but Chrome ignores the opacity, and just shows flat colour.
I've already tried adding -webkit-appearance: none. This fixes the alpha value, but removes the button part fo the select element from view.
Does anyone know how how to have a background with an alpha value, and not hide the button part of select?
http://jsfiddle.net/EMSmZ/9/ <== I've edited this to confirm that rgba is otherwise working for background colour, but not for select. The two boxes have different background transparencies in Chrome, but the selects don't.
Still nothing, submitted a bug report: http://code.google.com/p/chromium/issues/detail?id=110437
I hate to break this to you, but styling form elements with CSS is just a bag of hurt. There's a reason everyone uses Javascript replacement techniques to change the look and feel of form elements.. (except text and text area essentially)
not working as is in chrome 16.0.912.75 m on XP.
IF you give the disabled 'opacity:.2; it changes the opacity of the whole element.
Not sure what effect you are trying to achieve, maybe show some context to help offer a solution.
I ran into the same problem developing a form for a client. The workaround I ended up using was to set the background-color to a lighter version (#faebe7) of whatever base I color I wanted to use, in this case red, rather than using rgba(255,0,0,0.4).
Related
On the latest Chrome version, we got some powerful CSS tools to create rules using buttons and a highlight on every affected area when editing any rule in the inspector, this is very useful, but also some annoying to design a website.
If I am editing a rule like padding or margin, it shows a green or orange area around the element, for me is hard to say where is the border exactly with this colored area, I prefer to see the "REAL" result.
On the following image I am editing the padding and I can not see the border.
If I want to edit the border color to a different color, the line color turn into orange, then I can not see the color I am changing.
On the following image I am changing the border color to gray, as you can see it shows an orange border instead.
How do I disable/turn off this feature?
Google Chrome Version 73.0.3683.86
You are using bit older version, this has been fixed in newer versions. Chrome Version 74.0.3729.169 and Canary Version 77.0.3812.0.
after updating chrome, if you still face this issue, here is the work around.
With mouse hover over selected element in DOM Tree.
Without mouse hover over selected element in DOM Tree.
You just need to remove hover from element selection.
<div unselectable="on">Test Text</div>
This is what i could find for you, it might just work for you.
Full post here: How to stop highlighting of a div element when double-clicking
take a look please:
The azure one is just clicked. Firefox only. It's just an <img> inside a <li>, no links. Why the hell does it becomes azure?? It's the first time in almost 20 years of web programming I see this. It seems to have nothing to do with ::selection, nor tap highlight, so I can't find a useful css rule to stop it. Firebug shows nothing meaningfull on the styles analisys panel. Also it's the only element in the page that behave this way. So what the hell is it? How to avoid?
You can avoid it using user-select: none;
The text of the element and sub-elements will not be able to be selected
Note
This feature is non-standard and is not on a standards track
I'm trying to make a custom checkbox, so I made something like that : http://jsfiddle.net/wQdUn/2/
The problem is that, on WebKit based browsers, the checkbox is toggled only when clicking on the content of the <span>, not on the box itself, while in Firefox I get the behavior I expect.
So I have two questions:
Which one is the right behavior (i.e. the one conform to specifications)?
How do I get the result I want in both browsers (and others...)?
Thanks.
Not sure about the first question, but if you make the span an inline block too, it'll work as you expect in WebKit browsers. See http://jsfiddle.net/wQdUn/5
For those who come to this topic form google:
Safari 6.0.4(8536.29.13) still got this problem, you need to set inline-block on pseudo-element to make click work.
Chrome switched to Blink as it's rendering engine, so this problem didn't happen on chrome any more(26.0.1410.65).
I'm trying to put an icon inside a button element and I'm getting strange positioning but in Firefox 4. Check out this demo http://jsfiddle.net/j6q2e/3/
It works as expected in Chrome and IE but in Firefox the icon is completely off the reservation. Is that a known bug? Is there a way to fix that?
(I don't want to use <a> because it's a submit button for a form and I want to keep it that way. I also would like to avoid using background-image style because the icon is in a CSS sprite image and to use as background-image I'd have to save it as a separate PNG.)
Just a quick update to get this thing "answered"...
So yeah, this is a bug in Firefox, and still is as of version 5. Chrome, IE9 and Opera all correctly position the icon inside the button.
There is another SO thread dealing with it and here's the Mozilla bug.
You should be able to keep it as a sprite and use it as a background image, just adjust the space around that image to allow for the size of your button. You might want to also consider diagonal sprites to help solve your problem.
There Is A Date Picker Code In my Program (Of Course We Placed A Calendar Picture In The Web Page) The Problem Now Is That How Can We Be Able Not To Include The Picture Of The Calendar Picture In Printing?
Use a specific CSS for printing: http://www.alistapart.com/articles/goingtoprint/
Manipulate the dom (remove the image) before printing and insert it back afterwards.
The picture is most likely a background image. Browsers don't print background images by default. You'll need to activate printing of background images (and colors) in your browsers options.
If that's not a option you'll need to change your code, so that the image becomes a normal image instead of a background image.
First You should clarify what is Date Picker - is it Your custom code, or Jquery's one. If its javascript widget as with Jquery, its a common problem with different browsers. My suggestion would be - try YUI calendar instead, it shows well on IE, Firefox and even old Opera. Example:
http://developer.yahoo.com/yui/examples/calendar/formtxt.html
By the way, Jquery's DatePicker shows well in Firefox 3.6.