I have used following css for select tag:
select {
background-color: transparent;
border: 1px solid #A96800;
color: #fff;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
This css affects the text also.
You are unable to see the options because in your css, you are setting text's color to white.
color: #fff;
Just remove the above line so that your css looks like:
select {
background-color: transparent;
border: 1px solid #A96800;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
Now you can view your options as well.
Here's the updated fiddle: http://jsfiddle.net/UJMkN/1/
Hope this helps.
Related
I create two classes which have same properties but only one property(width) is different then how to decrease css code?
.login-box button{
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button{
width: 48%;
height: 40px;
background-color:#ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
You can group selectors using a comma (,) separator:
.login-box button,
.add-category-box button {
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button {
width: 48%;
}
In that case, you can give the button a class of .button and make it as a reusable component with different variations.
.button {
width: 48%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.button--full {
width: 100%;
}
.button--outline {
background: transparent;
border: 1px solid #000;
}
And in your HTML you can add the above classes as ingredients:
HTML
<button class="button">Submit</button>
OR
<button class="button button--full">Login</button>
That way, you can reuse the buttons anywhere in your project very easily.
Working on this mobile page:
http://mockup.comule.com/ (may contain pop-ups!)
Currently only working on the mobile aspect. When in the mobile view, the yellow menu 'Hamburger' icon is shown. I copied its CSS from elsewhere. Before it was used, the word 'Menu' was in its place. I didn't remove this word - the icon replaced/covered it.
The html markup still shows the word 'Menu' as being present:
Menu
The newly-added CSS:
.handle {
background-color: #990000;
font-size: 0;
line-height: 0;text-align:right;
padding: .75rem .5rem;
display:block;
}
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
}
What I want is the menu icon to appear on the right-hand-side of the bar and the word 'Menu' to re-appear on the left.
What needs to be changed in order for this to happen?
Thanks in advance.
"Menu" written on left and menu icon on right, for this try following:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: right;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: left;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
And for "Menu" on right and icon on left, try this:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: left;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: right;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
Also just to inform, I am not sure about the "margin-top: -4px" in ".handle:after", it would be either -4px or -18px, try it out and let me know which works.
Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.
In my own style.less file, I included TB:
#import "../bootstrap/less/bootstrap.less";
In the original TB files, forms.less, this LESS can be found:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: #baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: #baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: #baseFontSize;
font-weight: normal;
line-height: #baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 #white;
background-color: #grayLighter;
border: 1px solid #ccc;
}
}
So in my own stylesheet after after the #import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of #grayLighter you find in the above code):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (#grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?
I use these Less further down in my stylesheet like this:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
As you can see in below image, the pink background color is not working.
I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with #import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
Twitter Bootstrap is ment to easily build on top of it.
That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
To style your HTML:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
Try the following Less code:
#import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
I tried to change the layerswitcher color. But its not changed. Here is my code.
I tried in javascript also osMap.addControl(new OpenLayers.Control.LayerSwitcher({ 'activeColor': "white", 'fontColor': "black" })); but there is no effect.
.olControlLayerSwitcher
{
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: white;
background-color: transparent;
z-index: 10000;
}
.olControlLayerSwitcher .layersDiv
{
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: #CCCCCC;
}
The OL CSS is set within a style attribute and is stronger than your override.
You must use !important to override it:
background-color: #CCCCCC !important;
See CSS specificity.
This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working.
If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What?
<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
float: left;
position: relative;
border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border: none;
padding: 0 12px;
margin: 0 3px 3px 0;
outline: none;
cursor: pointer;
color: white;
font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-collapse: separate;
height: 26px;
line-height: 26px;
background: #5191cd;
}
.flat-button:hover {
background: #1c3f95;
}
.flat-button:after {
position: absolute;
content: ' ';
height: 0;
width: 0;
left: 100%;
border: 13px solid transparent;
border-left-color: #5191cd;
}
.flat-button:hover:after {
border-left-color: #1c3f95;
}
</style>
After playing around for a while, I found a simple fix for IE9.
http://jsfiddle.net/thirtydot/BWC9q/10/
All you have to is add overflow: visible to .flat-button.