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
Related
This might not make sense out of context, but I'm working on something where I would like there to be an inset box-shadow which transitions to a normal box-shadow. The transition works without the inset, but breaks with. Possible or not?
.foo{
height: 20rem;
width: 20rem;
box-shadow: inset 4px 0px 4px grey,
inset -4px 0px 4px grey;
background: cornsilk;
&:hover{
box-shadow: 1px 9px 4px 9px grey;
transition: box-shadow 1s;
}
}
https://codepen.io/bobam/pen/ZEWBeJp
The direct transition for the box-shadow inset to regular is not possible. But, there is one hack that can give a closer effect.
Consider the following css:
.foo {
width: 50px;
height: 50px;
border: 1px solid #aaa;
box-shadow: inset 0 0 10px #aaa;
animation: boxShadowOut 1s;
}
.foo:hover {
box-shadow: 0 0 10px #aaa;
animation: boxShadowIn 1s;
}
#keyframes boxShadowIn {
0% { box-shadow: inset 0 0 10px #aaa; }
50% { box-shadow: none; }
100% { box-shadow: 0 0 10px #aaa; }
}
#keyframes boxShadowOut {
0% { box-shadow: 0 0 10px #aaa; }
50% { box-shadow: none; }
100% { box-shadow: inset 0 0 10px #aaa; }
}
<div class="foo"></div>
You can do it with transition. You simply need to define all the shadows at once and play with the values to make them 0 when you don't need the shadow:
.foo {
height: 8rem;
width: 8rem;
margin:10px;
box-shadow:
inset 4px 0px 4px grey,
inset -4px 0px 4px grey,
0px 0px 0px 0px grey;
transition: box-shadow 1s;
background: cornsilk;
}
.foo:hover {
box-shadow:
inset 0px 0px 0px grey,
inset 0px 0px 0px grey,
1px 9px 4px 9px grey;
}
<div class="foo">
</div>
Let's say i have a button class
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
and whenever i click something(not the 'mat-cancel-color' button) i want this class to gain a glow effect which would fade away over .4s.
should i create a new class and then give that class the box-shadow(glow) property, then below transition-duration property and then the the box-shadow(no glow) property again? as such:
click-class {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
transition-duration: .4s;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
}
or does transition-duration only work when switching classes or does it also work when switching properties inside a class? if it as such, how should i go about it?
EDIT: mistook transition-delay with transition-duration.
What you are looking for is a CSS animation. Mainly because you don't want the default state with the glow, that's why transition won't work here.
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
.mat-cancel-color:hover {
animation-name: glow;
animation-duration: .4s;
}
.mat-cancel-color-trans {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
transition: all .4s ease;
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 0);
}
.mat-cancel-color-trans:hover {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
/* Standard syntax */
#keyframes glow {
0% {
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 1);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
}
<button class="mat-cancel-color">Button</button>
<button class="mat-cancel-color-trans">Button</button>
You could use some psudo classes like this:
:active:not(*element/class*) {...}
and then put the glow animation that you want within the brackets. :active is a psudo class that is only applied when the element named is clicked. :not() excludes the class listed in the parentheses. As long as you have the glow animation working fine, then this should work.
This is a snippet of my test code:
a:active:not(.mat-cancel-color) {...}
How to add bootstrap focus glow to Bootstrap Tags Input (for Bootstrap 3)?
bootstrap-tagsinput.css file:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
Is it possible to vertically align labels?
Thanks.
It is currently impossible in pure CSS as there is no parent selector but you can do it in JavaScript:
$('.bootstrap-tagsinput').focusin(function() {
$(this).addClass('focus');
});
$('.bootstrap-tagsinput').focusout(function() {
$(this).removeClass('focus');
});
and CSS:
.focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
}
Straight from Bootstrap site. If you look at their focus CSS it looks like this.
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
What you might want to try is add the above onto your class from your code above. It would look like this.
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
I have not tried this on anything. But I think this might help you.
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?
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.