i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.
Can you help me out finding whats wrong with this code please:
CSS:
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
padding:5px;
}
HTML
<select>
<option>hey</option>
<option>hey2</option>
<option>hey3</option>
</select>
Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!
http://jsfiddle.net/wL8Rs/
I'm using Chrome latest 34.0 version and Firefox latest 29.0 version
Add padding to select
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
padding:5px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}
http://jsfiddle.net/wL8Rs/3/
Related
Ok, so I wish to create something like http://i.imgur.com/jox0ENW.jpg. But be of a modular type, where I might have a button class that'll make it look like that, and a class I can use to apply to sections.
Right now I have:
.double-drop {
position: relative;
padding: map-get($padding, xl);
margin-top: (-1 * 280px);
border: 3px solid $black;
background-color: $white;
&:before {
content: '';
position: absolute;
z-index: -1;
top: (-1 * map-get($padding, m));
right: (-1 * map-get($padding, m));
width: 100%;
height: 100%;
border: 3px solid $black;
background-color: $lighter-grey;
}
}
Which works, and creates that effect on sections. But not if the section is inside a parent which is absolutely positioned. (the drop shadow goes behind..)
I would like to imitate that effect in the image, for all my buttons, and obviously transition its translate so it moves or what not.
Would it be possible first of all?
Multiple Borders on CSS Only Button
Perhaps using multiple shadows as borders would be a simple solution? It degrades gracefully in browsers that don't support it, and it's easy to work with.
JSFiddle Example
.shadow-button {
padding:10px;
border:solid 3px #000000;
display:inline-block; /* used only to shrink wrap the div around the contents, has a default margin */
-webkit-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
-moz-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-weight:bold;
}
p {padding:10px;}
<div class="shadow-button">PLAY MUSIC VIDEO</div>
Browser Support: http://caniuse.com/#search=box
This is my CSS code:
.thzPartsHeader, .thzPartsContainer {
border:1px solid #0080ff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
-moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
padding: 5px 20px 5px 20px;
margin:auto;
font-family:georgia;
font-size: 12px;
color:#ffffff;
background-color:#000000;
}
This is HTML code:
<fieldset class="thzPartsContainer">
<legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend>
<textarea class="textArea" id="txtarea" name="codearea"></textarea>
</fieldset>
This is how it appears in Google Chrome (This is exactly what I want):
But this is how it appears in Firefox (no reputation to post images :o ):
(source: googledrive.com)
It appears as if the shadows are displaced and margin:auto property is not working in firefox. What is the fix for both of them? please help.
http://jsfiddle.net/f2ndc/
The shadow part of your question is a duplicate of
Box shadow CSS with a <fieldset>. Firefox vs Chrome
Not the best solution as you will have to have a fixed height and width for the <legend> but adding this could work
.thzPartsHeader{
position: absolute;
top: -9px;
left: 50%;
margin-left: -75px;
}
.thzPartsContainer{
padding-top: 9px;
position: relative;
}
fiddle: http://jsfiddle.net/FBca7/2/
I'm having some problems to add opacity to IE 8 (I would also like this to work in IE7 and IE9 but I've just tested it on IE8).
I have my css as this:
label{
color: #333;
text-decoration: none;
border: solid 1px #bebebe;
width: 138px;
padding: 5px;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #f2f2f2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd');
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#bdbdbd));
background: -moz-linear-gradient(top, #f2f2f2, #bdbdbd);
display: inline-block;
margin-bottom: 10px;
position: relative;
outline: none;
}
So all my labels must be the same in all explorers (This is working with no problem) but I wan to add a opacity to some of these labels. I was using:
.aclass{
opacity:0.4;
filter:alpha(opacity=40);
}
But it is not working on IE. I read some articles here, for example:
Opacity CSS not working in IE8 , opacity in IE8 not working
and others but I haven't found the solution for this. I tried adding this:
.aclass{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
Also adding "zoom:1;" to the previous block or " display: block;" but still not working. I haven't found the solution to this, so if anyone could help me I would really appreciate it.
Thanks in advance!
In your gradient filter, you can define #AARRGGBB whereas the AA == alpha values.
From MSDN. You might have better luck doing this than adding unique filters for gradient and alpha.
I cannot figure out, in a single page, why CSS3PIE works on the outside page shadow but not work on the shadow of the photos in IE8. Everything work fine in other browsers.
I am using #page for the outside page div and
#facilities_maintable tr>td.column2 img for the photos in the page content.
#page
{
position:relative;
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
background-image: url('../../content/img/bg4.jpg');
background-repeat: no-repeat;
background-color: #efebe0;
-webkit-box-shadow: #222 0px 0px 8px;
-moz-box-shadow: #222 0px 0px 8px;
box-shadow: #222 0px 0px 8px;
behavior: url('../../Content/PIE.htc');
}
#facilities_maintable tr>td.column2 img
{
margin:5px 15px 5px 15px;
border:1px solid #666;
-webkit-box-shadow: #777 3px 3px 5px;
-moz-box-shadow: #777 3px 3px 5px;
box-shadow: #777 3px 3px 5px;
behavior: url('../../Content/PIE.htc');
}
just set td {border-collapse: separate;}
i know, looks strange, but works
Safari to version 5.1, Chrome to version 10.0 and iOS support a property-webkit-box-shadow.
Firefox to version 4.0 supports property-moz-box-shadow.
Internet Explorer up to version 9.0 does not support the property box-shadow.But you can use non-standard property of the filter:
filter: progid: DXImageTransform.Microsoft.dropshadow (offX = 5, offY = 5, color = # 000000);
Hi i created a label with some css. The label css is working fine Firefox , chrome but when i run in IE the css is not coming properly.
label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; }
.div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px; border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;}
.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-right { -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label>
<div class="div_form_textbox ui-corner-right">
<input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/>
</div>
The proper output in mozilla and chrome like this
So the same thing in IE is coming like this:
The left side is the label and the right is the div inside there is a textbox. my problem
Only half of that is coming in the label of doctors first name . Please help me to get out this issue
I get that exact behaviour in IE when I look at it in Quirks Mode.
You probably just need to add a valid doctype as the very first line, such as:
<!DOCTYPE html>
If you already have that, then there are other possible reasons for Quirks Mode.
IE8 and less browsers cannot render CSS3 -webkit commands. Like the one you have used in css style:
.ui-corner-left { -webkit-border-bottom-left-radius :4px;....