SELECTs OPTIONs seem to be nasty to get a hold on.
With something like this css-snippet i'm trying to visualize the category of an options-data.
option{
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 12px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 1px;
margin-bottom: 1px;
}
.type1, option[data-cat="T1"] {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEWazTL///9Sg7a4AAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTExLTA1VDA4OjI4OjQwKzAxOjAww0rpAAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0wNVQwODoyODo0MCswMTowMLIXUbwAAAAASUVORK5CYII=');
}
In this fiddle i am adding simple images to a background of the OPTION-tag. FireFox and Chrome are showing these as expected but IE11 seem to be ignoring or hiding them.
Any way to make IE11 show (or fake) them?
There is quite a few reasons why this wont ever work.
and even more why you just shouldn't bother.
Basically Select & Option Box's are defined by the OS, User Specific Settings & the Browser.
This is for many reason one main reason being usability.
Styling the outer box etc is usually not a problem but the style with in the select or Option is just not even worth trying to edit.
If you want to create something like this that you have full control over I would advise you use List Items instead as they will offer the flexibility you are after.
Related
Hoping someone here has seen this before. I have a site that required me to remove the default bullet points and replace them in css, on every browser and mobile device it shows up the way I've style it to aside from IOS.
I've checked safari and chrome on my iphone 6s and in the list where I replaced the bullets with a white box it's changing it to a rather large box with a black gradient.
This is how it looks on a pc/android - the bullets are orange which is the desired colour
An this is how its displaying on all IOS mobile browsers:
This is the css that I'm using for the bullets:
section.specificationsSection ul li:before {
content: "\25AA";
font-size: 37px;
display: inline-block;
width: auto;
line-height: 15px;
margin-left: -.8em;
color: #f15822;
margin-right: 8px;
margin-top: 4px;
}
I'm stumped, I've looked around to see if anyone else has seen this, asked a few designers and developers with no luck, any help is welcome! thank you.
iOS may be replacing the "\25AA" entity with a black square emoji? (reference: https://www.iemoji.com/view/emoji/521/symbols/black-small-square)
We had this issue as well. We switched to "\25FC", which looks similar to "\25AA" and avoids the huge, beveled look on iOS. We've only needed to use it in black color, though.
This technique for preloading several images entails the following CSS:
#preload_area {
background-image: url(someimage.jpg);
background-image: url(someimage2.jpg);
width: 0px;
height: 0px;
display: inline;
}
However, will someimage.jpg actually be loaded? I would have thought it would simply be ignored hence not loaded after being overriden by the rule with someimage2.jpg in the next line.
You are right, the first background-image would be ignored. However, you can use something similar since CSS3 supports multiple backgrounds:
background-image: url(someimage.jpg), url(someimage2.jpg);
Supported by every broswer since IE8 – http://caniuse.com/#feat=multibackgrounds
I got a problem on Firebug tools. You can see the pic. I drag it.. where is it from? and one more think if i write just some css it's expand a lot.. like
h2 {
padding: 20px
}
but when i am trying to copy my css style then
`h2 {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-right: 20px
position: 0 0;
}
please help me
They are not bugs, but features, Bapy.
ua.css stands for User Agent CSS and is internally used by your browser. You need a CSS reset to override it.
In style inspector, all shorthand properties can be expanded to see each of the individual properties they stand for.
Additional note: Over (at least) the past year, Firefox has been a step behind Chrome regarding (web) developer tools. Most of their recent enhancements have been implemented after that functionality was initially featured by Chrome dev tools and they look and feel surprisingly similar in Firefox.
For example, at the moment of this writing, Chrome dev tools currently feature a cubic-bezier() viewer which is not available yet in Firefox. I expect one to show up in Firefox dev tools over the following months.
For development purposes only, I recommend using Chrome, at least for the time being.
Please note the above note does not mean I don't appreciate the extraordinary effort and the quality of MDN as a resource, which I highly recommend. It is an incredible aid in web-development and has grown to be a dependable source of information on web standards.
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
so you must have to use shorthand css like :
h2 {
padding: 50px 30px 50px 80px;
}
or you can specify individually by name like
h2
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Hopefully it is useful to you :)
I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
I found a neat example of Showing Hyperlink Cues with CSS. But in the CSS of the example, there are three separate styles that in my head should do mostly the same thing. Or at least, I should not have to use all of them in my opinion. But I'm not sure I get them all. Here they are:
/* all A tags whose REL attribute equals pdf */
a[rel='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
/* all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
/* all A tags whose REL attribute contains the value pdf, seperated from other values with a space */
a[rel~='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
I'm thinking I can possible replace the first two with the last one, but again, I'm not 100% sure I understand how these works. Anyone care to shed some light on this?
My question is concretely this: Can I skip one or two of these and still get the same result on all my links?
At a first glance, the second one should also cover the first and third. But the problem is that there might be a browser that doesn't support the second version and thus needs the first one.
But why would you want these three? If the first should work, then stick with that one. If that one isn't supported, the others won't be supported for sure.
I would almost make Venn diagrams of it...
All rel='pdf' are overruled by rel~='pdf'
All rel~='pdf' are overruled by rel*='pdf'
For example:
[rel*='pdf'] will style rel="pdfdoc", while [rel~='pdf'] and [rel*='pdf']
will not
Both [rel*='pdf'] and [rel~='pdf'] will style rel="pdf doc", while [rel='pdf']
will not
All selectors will style rel="pdf"
Not all browsers can handle these CSS3 selectors, I think that's why rel='pdf' was added. You could remove rel*='pdf' if you don't want to style links that contain pdf in the rel attribute.
This one covers all use cases:
/* all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Since it matches pdf anywhere in the text.