I have created two text boxes. A light Gray colour shadow is showing above the textbox. I am unable to remove the effect. I have used jQm CSS file in my project.
Above is my screen shot.
The shadow effect upon focusing on an input is from the ui-focus css class
-webkit-box-shadow:0 0 12px #38c;
-moz-box-shadow:0 0 12px #38c;
box-shadow:0 0 12px #38c
If you want to get rid of the shadow, just override the class:
.ui-focus {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
If you don't like the little inset shadow when the text box is not focused, you can override the ui-shadow-inset class:
.ui-shadow-inset{
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
DEMO
Related
If you click this link it takes you to a few examples on their page.
https://ng.ant.design/components/button/en
I am able to access the buttons and change the color but not the actual blue border. I have tried :active, :hover, :focus, etc..
This is how I access the button for some custom css
.ant-btn-circle {
background-color: $theme-foreground !important;
color: rgb(var(--MainColor)) !important;
}
.ant-btn-circle:focus {
background-color: rgb(var(--MainColor)) !important;
color: $theme-foreground !important;
outline: 0 !important;
}
The outline portion doesn't seem to work... Any tips?
I see something like this that has the blue color but I dont know what it is. --antd-wave-shadow-color
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
--antd-wave-shadow-color: #1890ff;
}
Only solution I found so far is creating a theme.less file in your src and adding this:
#import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
#primary-color: #6D6E70;
So I guess it is the primary color. Would be nice to set it custom. In the css.
I managed to resolve this by setting the transition period for the button's border-color property to 0ms.
So using your example:
.ant-btn-circle {
transition: border-color 0ms;
}
i got a div with a blur shadow on it. i am a using the CSS code below:
-webkit-box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .4);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, .4);
the problem is when the page is printed the shadow turns into dark black.
please help.
The transparency when printing is a problem. Your best bet is to define different styles for the printed page with a separate print.css stylesheet with print media query or by using a media attribute like
#media print {
item {
box-shadow: none;
-webkit-box-shadow: none;
}
}
This is a known Chrome bug.
A work around is to apply a filter like -webkit-filter: blur(0); to the affected elements; this will however rasterize the element in the resulting PDF.
Most likely the printer have you tried printing anywhere else?
I need to know how to get a drop shadow like the date picker in this link
http://taitems.github.com/Aristo-jQuery-UI-Theme/
Is there a default class I need to use?
Use CSS:
.ui-datepicker {
-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
Make sure that if you are running ie9, that compatibility mode is turned off, or you will not see the shadow.
Cost me an hour.
I have a button image I'm using as a background image for some links.
The background image has rounded corners.
I want to use a css drop shadow instead of putting the drop shadow in the image
The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).
My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.
Any ideas?
Box-shadows don't show through transparent backgrounds. A more simple test case would be:
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: transparent;
box-shadow: 0 0 10px #000;
}
The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/
To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
http://jsfiddle.net/Etmty/
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
<div class="box"></div>
This bug has already been discussed here, but I haven't found a solution to it yet.
There are small lines on the top and bottom of my background image that appears to be the background color. Both the background image height and container height are the same (29px), and the image is not transparent, but rather with a white background. There isn't a border at all on the container, so this leaves me a bit stumped. This looks fine in Safari on a Mac, but shows the above issue on iPad.
html:
<a class="help" href="#">Help</a>
css:
.help {
color: #fff;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
background-image: url(../img/help.png);
background-repeat: no-repeat;
background-color: #ee3224;
height: 29px;
line-height: 29px;
padding: 0 10px 0 26px;
text-transform: uppercase;
position: absolute;
left: 0;
top: 0;
}
I had the same problem, It appears to be a difference between the way IPad safari calculates img size and it's container block size.
This is discussed more here https://stackoverflow.com/a/6324025/1210282
The solution being to add an outline of 1px to your image to stop the background bleeding through
I found a solution for this.
It's quite simple, just use:
background-clip: content-box;
background-size: cover;
where the background-color and background-image is set.
Since I have padding on the box where this bug is happening, what did the trick for me is:
background-clip: padding-box;