is there a way to remove the background disc (circle) from around and icon? the only reference for a disc I've found is below
background: rgba(0,0,0,.4) /*{global-icon-disc}*/;
If your using jquery mobile 1.4 use class="ui-nodisc-icon"
Try something like this to override the JQM css.
.ui-icon, .ui-icon-searchfield::after {
background: transparent;
background-image: url(http://code.jquery.com/mobile/1.1.0/images/icons-18-white.png);
}
In version 1.3.0, add class ui-icon-nodisc
I was having the same problem and came with this solution :
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon- bottom:after, .ui-btn-icon-notext:after {
background-color: transparent !important;
}
This is what worked for me:
.az-nodisc {
background-color: transparent !important;
border: none;
box-shadow: none;
}
Then apply the style as:
test
Related
My problem:
when I use the ant-design
I want to change the color of select when I hover&focus this select menu!
but it doesn't work!
before
after
I tried to rewrite lots of code about this, but it doesn't work!
ant-select-selector:hover{
border-color:1px solid red;
}
It should be border with an !important override. Include also the focus-within selector
.ant-select-selector:hover, .ant-select-selector:focus-within {
border: 1px solid red !important;
}
you can do this
ant-select-selector:hover{
border-color:1px solid red !important;
}
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 build my first phonegap Jquery Appl
Im changing my icon using this class
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
This custom icon is for a list view , and i try to remove the round grey background load
Also my picture is a bit big for the shape
I was playing with the .ui-icon but doesnt work
Cant find the class
I just wanna my custom arrow picture full size on a white background list no round no circle box shape
Maybe there is an attribute or via css to make that
thanks
If you are using jQuery v 1.4.0 + then you just need to add the class .ui-nodisc-icon to your link element to remove that annoying circle. You will not need to edit any css or write any overrides.
Late to the party here, but a simple answer is to add
background-color: transparent;
box-shadow: none;
to your custom class name, so:
.ui-icon-myapp-email {
background-color: transparent;
box-shadow: none;
}
is all you need.
With JQuery Mobile 1.3, now all you have to do is add the class "ui-nodisc-icon", no need to mess around with the CSS.
from JQuery Website:
"If you don’t need the dark circle behind the icons, simply add the ui-nodisc-icon to the element or its container to remove the icon background."
This should work.
.ui-icon-myapp-email {
background:transparent; /* or none */
background-image: url("app-icon-email.png");
/* The following border radius rules will override the circle around your icon */
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
/* To fix the size issue override the .ui-icon height */
.ui-icon{
width:14px;
height:20px;
}
Overrides the icon disc color to white.
.ui-icon,
.ui-icon-searchfield:after {
background: #fff /*{global-icon-color}*/;
background: rgba(255,255,255,1) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Icon size is specified in ui-icon class which defaults to 18px.
.ui-icon {
width: 19px;
height: 19px;
}
For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I solved this issue, using:
background-color:transparent;
if you want to add color in background you can use:
background: url(yourimage.png) repeat;
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;
I guess the subject says it all. I have a web application when viewed on an Iphone, Ipod or Ipad, input submit buttons have rounded corners. Is there a way to stop this?
If you add...
input, textarea {
-webkit-appearance: none;
border-radius: 0;
}
Then your buttons will inherit any CSS styles that you have applied for other browsers.
Didn't work for me, the -webkit-appearance:none.
This does:
input[type=submit] {
-webkit-border-radius:0px;
}
I had the same issue with rounded corners on a button with background image, just on the iPhone.
You can try to use following CSS:
-webkit-appearance:none;
More info: http://trentwalton.com/2010/07/14/css-webkit-appearance/
I've found that on iPad 2 you have to use the following:
-webkit-appearance:none;
border-radius: 0;
in your button class.
I had a site with an input submit type="image". This vairation of the above fixed the rounded corners:
input[type=image] {
-webkit-border-radius:0px;
}
I've found that setting background: linear-gradient(color1, color2) gets rid of the overly rounded corners on Apple devices and works on all other browsers/platforms I have tried.
I solved by adding code for both the "button" and "submit" types:
input[type="submit"] {
text-align: center;
-webkit-appearance:none;
-webkit-border-radius:0px;
border-radius:0;
height:30px;
}
input[type="button"] {
text-align: center;
-webkit-appearance:none;
-webkit-border-radius:0px;
border-radius:0;
height:30px;
}