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;
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;
}
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
I write my application on HTML5/CSS3/JavaScript. For my button I create style (all work fine in browser), but when I start my application on iPad my active effect override standart iOS click effect.
How I can override this standart effect?
My style :
<style type="text/css">
.button {
display: inline-block;
width: 150px;
height: 50px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:ACTIVE {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015) );
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015' );
}
My Button:
The answer to your problem I believe is very simple.
Add this following CSS code to your button or body tag (to affect the entire document).
body { -webkit-appearance: none; }
This will remove default styles for buttons that iOS places onto certain UI elements.
Hope that helps.
I had the same problem use the button tag and it seems to override.
<button class="button">Link</button>
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;
}