I want to get a textfield effect using CSS3 like this :-
I tried to do that using CSS3 but yet not succeeded to get exactly the same look, please find my code here in jsfiddle.net
CSS
.field {
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
width: 277px;
height: 18px;
border-top: #9f9e9e 1px solid;
border-right: #c9c9c9 1px solid;
border-bottom: #ececec 1px solid;
border-left: #c9c9c9 1px solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
outline: none;
padding: 6px 8px;
font-size: 13px;
line-height: 16px;
color: #333;
}
HTML
<input type="text" name="name" value="" class="field">
Thanks in advance.
It is difficult to define "exactly the same look". Any way, that is my try:
updated demo
I have changed box-shadow, and given it a second shadow
box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3),
inset 0px -1px 1px 1px rgba(0, 0, 0, 0.2);
The key issue here is that you can set as many shadows as you want, even of the same kind (I mean both being "inset"). This way, you can get almost whatever you want. Even more, if you are using alpha in the colors.
By the way, I think you can drop -webkit-border-radius.
Related
I have a HTML Select drop down box, which I have styled, the problem I am having is that I can not seem to style the background color of the options. Below is a link to a demo as you can see the drop down options has a white background, which i am trying to change.
http://cssdeck.com/labs/lnroxrua
Here is my HTML Code:
<div class="select-div">
<select name="pagination">
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
CSS Styling
select{
background:transparent;
width: 170px;
padding: 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:600;
color:#fff;
line-height: 1;
border: 0;
border-radius: 0;
height: 22px;
-webkit-appearance: none;
}
.select-div{
width: 170px;
height: 22px;
overflow: hidden;
background: url(arrowhead.png) no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 8px 3px -9px #000000;
-webkit-box-shadow: 0px 8px 3px -9px #000000;
box-shadow: 0px 8px 3px -9px #000000;
}
Thanks
Here's a DEMO.
Just add this CSS rule:
select > option {
background: color;
}
For example:
select > option {
background: pink; /* Or an hexadecimal value */
}
Cheers,
Leo!
Unfortunately, webkit browsers do not support styling of tags yet.
check:
How to style a select tag's option element?
How could you eliminate the top box-shadow. It would be perfect if CSS had something already built in, but anything rarely is.
Here's a live example.
Scroll down to the bottom of the page to the footer. I want to eliminate the top box-shadow on the pseudobottom.
Thanks
Use this:
#Background
{
-webkit-box-shadow: 0px 1px 30px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 30px rgba(0,0,0,.4);
box-shadow: 0px 1px 30px rgba(0,0,0,.4);
}
Apply this CSS to your #wrapper2
#wrapper2{border-radius: 0 0 12px 12px;
-webkit-border-radius: 0 0 12px 12px;
-moz-border-radius: 0 0 12px 12px;
}
This will solve your design and give the same output that you have desired by including a div with pseudobottom class.
Further, I am also curious to know the purpose of including a div with pseudobottom class. Is it just to resolve the design or it will have the contents too?
Used to this add one more box shadow for top and bottom Shadow
*as like this*
.container-wide{
-webkit-box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
}
If u show only top shadow than apply this css
.container-wide{
-moz-box-shadow: -1px -1px 1px 1px #ccc;
-webkit-box-shadow: -1px -1px 1px 1px #ccc;
box-shadow: -1px -1px 1px 1px #ccc;
}
I have this button that appears fine on desktop and mobile, but when viewed on an android tablet there is this white background around the corners where the transparency for the button would be. Has anyone encountered this?
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
padding: 10px 20px;
background: none;
background: -moz-linear-gradient(top,#41f0ed 0%,#278a88);
background: -webkit-gradient(linear, left top, left bottom, from(#41f0ed), to(#278a88));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 0px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
have you tried
background:none;
to
background: transparent;
Try removing box-shadow or gradient. I imagine one of them is the culprit. If it is, you can do a conditional check for and Android tablet, and exclude that from your CSS.
var userAgent = window.navigator.userAgent.toLowerCase();
if ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) {
//it's an android tablet, remove box-shadow
};
Here the class and the example
<asp:DropDownList ID="dropDownListZenithYesNo"
CssClass="dropDownBox" runat="server"></asp:DropDownList>
And here the CSS class of that dropdownlist
.dropDownBox
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
And here how it looks nice when you not click to see elements
And this is how very bad it looks when you click to see elements
Testing with windows 7 firefox latest version
CSS CSS3 HTML dropdown list color style
Add the following css below your css
.dropDownBox option
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
But test your page in multiple browsers because it may have different results. Infact i have different results.
You must be inheriting from a default style. I would suggest specifying the color for your options:
.dropDownBox option{
font-size:1.2em;
background-color:#FF0 !important;
display:block;
}
Here is the fiddle
Can an inset box-shadow work on an inputfield?
JsFiddle: http://jsfiddle.net/hKTq2/
Yes, this is something I was working on the other day, it is indeed possible.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
You just need to have a background set for the shadow to fall onto :)
http://jsfiddle.net/Kyle_/ZCq6w/
In the meantime, this has become a common, though here's my "the perfect inset input".
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}
<input type="text" />
Yes you need to add :
background-color:transparent;
Hi ADD this css then you able to insert shadow
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
Just add background:none; on class .innershadow
http://jsfiddle.net/jack_fiddle/hKTq2/6/
you could do something like this to realize a inset dropshadow inside the text-input:
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
--hennson