I know it's possible with jquery to make something that looks like a select box so I can make it look however I want. However, with just css, how much control do I have?
I use border, padding, and width, and the end result looks great.
The only thing that bothers me is the part that drops down. Is there any control over this? (It looks dumb to have padding and on the drop down list have none).
You have some control, but there is quite a bit of variation between browsers and operating systems. For example, Internet Explorer on Windows will always show the standard grey down arrow, even though you can re-colour this in other browsers.
As for the part that drops down - these are option tags, not select; so to change them you'll be applying styles to the option tag instead:
select {
border: 1px solid red;
}
option {
background-color: blue;
}
Luckily some other people have done some research detailing what works and what doesn't, so here are some resources for you:
Styling form controls in general: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
Selects specifically: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
Browser comparison: http://www.electrictoolbox.com/style-select-optgroup-options-css/
Related
I'm trying to make a wordpress page that grabs some dynamic content and puts in on a page that is ready for someone to easily print. There are two things that are getting in the way and some help would be great.
after pressing print initially in chrome the page looks a mess - overzoomed so it is incomprehensible. If i dial "scale" back to 60 it looks pretty much like the webpage. I've tried setting #media print scale to .6 but that seems to just shrink the messy view into the middle of the page. Any ideas?
initial messy zoom at 100%
if i take the zoom down to 60% perfect
some text on the page insists that it prints in black. no amount of alteration on the site will change that. it appears white on the web, prints in black. Any ideas?
thanks.
nick
Some text on the page insists that it prints in black, no amount of alteration on the site will change that. It appears white on the web, prints in black. Any ideas?
When printing, the Chrome browser applies its own styling to the page. On your page, the text is changing from white to a dark grey because Chrome is removing the blue element behind it. Without the blue element behind the white text, it'd just be white text on a white background, so Chrome has gone ahead and 'fixed' that for you so that it's readable.
If you're looking at the print settings in Chrome, you'll see a 'More Settings' option. If you open that, you'll see that Chrome has given the user the option to remove the background graphics as seen below.
By default, this button is unchecked in Chrome. This is a very intentional feature of Chrome that allows users to save ink when printing from the web. Browsers can do whatever they want when printing, so some things may simply be out of your control.
You can change the styling for the print page by using the #media CSS query. You still need to keep in mind specificity when using the #media query. If Chrome is ignoring one or more of your attributes, you can try using !important with whatever you're trying to change.
Example
#media print {
.my-class {
color: blue;
}
#my-id {
color: green;
}
.stubborn-div {
color: red !important;
}
}
You could also try this:
-webkit-print-color-adjust: exact;
When set to exact, the background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden. Note that support is extremely limited to what browsers can & will use it. See here.
After pressing print initially in chrome the page looks a mess -
overzoomed so it is incomprehensible. If I dial "scale" back to 60 it
looks pretty much like the webpage. I've tried setting #media print
scale to .6 but that seems to just shrink the messy view into the
middle of the page. Any ideas?
I've looked at your code enough that I really think it just comes down to you figuring out your responsive styling, and adding the necessary CSS to the #media query.
It's impossible to be sure about anything because you haven't posted a stitch of code. Have you tried setting
body{ height:100vh; width:100vw; }
?
Are you aware that there are "print styles"? I.e. you use the media query #media print { ... } in your CSS and there write CSS rules for everything that should be different in the printout.
You can for example change font sizes for classes, tags, or the whole body, you can change (text) colors, and you can even hide stuff in the printout, like menu bars and sidebars, by using display: none for these elements in the print styles.
I am trying to remove a blue outline from the option list of a select element.
As I only see this outline on Chrome on Windows 7, here is an image which points out the outline I’m talking about
Here is the code: https://jsfiddle.net/463pLc67/
I’ve tried using outline-color on the option:focus as well but it doesn’t seem to have any effect. Is there any way to get rid of this outline just using CSS?
Because browsers handle UI aethetics differently for elements like radio buttons, checkboxes and select drop downs it's hard to overcome without using JS or complex CSS/HTML. I think Select elements are even harder than radio buttons and checkboxes, I don't think there is a reliable HTML/CSS only for this.
Sorry, I know this isn;t the answer you're looking for. You could also try 'border: 1px solid #COLOR' as a last ditch attempt.
The appearance: none rule changes a bit the display (On Ubuntu/Chromium) but makes it more buggy: no right-border but still some left-borders (No effect on firefox).
Normal:
With appreance: none:
You can play with the background-color which works also on <option> to make it closer to your outline color so it would hide it a little.
select.lalala option {
background-color: #727272;
}
Nothing visually acceptable IMHO.
Btw this is browser specific as also probably OS specific so it seems to be a loss of time.
I spent way too long trying to remove extra spacing to the left of a select box, when in Chrome Developer Tools, I finally saw that the user agent stylesheet was adding 2px margin-left (looking under the Computed Style). But when I click the margin-left dropdown to see where this style is being defined, it says it's being defined as 0em, as in the following screenshot...can someone explain this to me??
I ran into this issue as well - setting an explicit height fixed the issue.
The reason:
"*The purpose of intrinsic margins is to try to prevent adjacent controls from butting up against one another. Especially with rounded controls this looks terrible. The reason you see the values change is that we only set intrinsic margins when we think it won't disrupt the layout of the page. If the author specifies an explicit height/width on the control, then we assume the designer is needing pixel-precise control, and so we turn the margins off to avoid disrupting the page layout.
This feature was originally motivated by cases like Google's front page, which had two buttons that butted right up against one another. They have spacing now on the modern version of the page, but in the past they did not. This happens all over the place on the Web as well, especially with text fields next to buttons. They end up looking terrible on OS X especially (they look bad on Windows too, just not quite as bad).*"
Source: http://code.google.com/p/chromium/issues/detail?id=128306
From that screen shot, it looks like there is a rule like:
margin: 2px 2px 4px 2px that is overriding what the user agent originally spec'd as 0em
Apologies if this has been asked or is a dumb question - it seems simple, but I did search.
On my site, I use a navbar that I initially pulled from a site with many free canned navbars long ago, and have since changed it a lot since then by just tinkering with parameters. Now, with the advent of mobile (yes, I'm behind), I want to change all my dropdown menus from popping out on hover to popping out on click. I know this is how bootstrap does it, etc, so clearly it can be done.
For me, things start changing colors and appearing based on something like this:
.menu ul li.selected a.outer1 {color:#000; background:#929292; margin-bottom:250px;
zoom: 1; filter: alpha(opacity=60); opacity: 0.6; }
When the outer list element is selected, stuff changes. However, it seems that the ".selected" makes the li "selected" on hover. Is there a way to change it so it's selected on click? Just a simple word change? Or am I going to have to change my structure? I can provide additional code if desired.
It is not a simple single CSS change. The media queries loads a certain div for a specific viewport and hides another.
You should look at media queries and how you want to load/hide specific elements per viewport.
I am using GWT 2.3 to create a web application. In the web page, I have a button for the submission. I haven't created any css properties for this button. In Google Chrome and Firefox, the size of the button is just the size of the text of the button. However, in IE8, the size is bigger, with some spaces before and after the text of the button. Does any body know how should I do? Since I need to support the internationalization, the texts of the button for different locales are different.
I have tried width:auto; for the button, but it doesn't work.
Thanks in advance!!
Ah, this is an oldie but goodie.
Basically, IE sucks at rendering buttons and you have to add this CSS to fix it:
.my_button {
/* optional */
padding:0 .25em 0 .25em;
/* These two are required */
width:auto;
overflow:visible;
}
See the link above for more information.
In general (not only for GWT), buttons are rendered very differently not only between browsers, but also between operating systems - especially they look completely different on Mac OSX. Take a look at this site, which also has a few nice solutions around the button problem: http://particletree.com/features/rediscovering-the-button-element/
So if you need exact sizes (and maybe a consistent look) across browsers/OS, I think it's better not to use the native button style at all, but to fully customize the style of your buttons. (This is pretty usual on modern web sites, e.g. I don't think there are any native style buttons on stackoverflow.com at all.)
Use Anchor with different background images for it's various states (link, active, hover, visited).