I already set textfield background colour into transparent but not working in Ionic.
.item .item-input {
background-color: transparent;
}
I already read the Ionic documentation but it's not working. It's still white colour.
http://ionicframework.com/docs/components/#forms-inline-labels
Are you sure your css rule matches the correct element?
Your rule:
.item .item-input {
background-color: transparent;
}
Matches an element with class item-input, which is a descendant of an element with class item. Perhaps you meant the following?:
.item.item-input {
background-color: transparent;
}
This rule matches an element with class item and item-input.
In Angular (as your question has an Angular tag), the answer is to use --background
--background: transparent !important; // example
see https://ionicframework.com/docs/api/input#css-custom-properties (select : Angular from the list to see Angular related docs)
Maybe a bit of a hack, but could you put the text inside another div and give the div a special background colour.
So, something like this:
.text {
background-colour: red; // or colour: red; I don't know
}
and then put the text between this div. Hope it helps.
.label {
background-color: reba(255, 255, 255, 0.0);
}
Then put the CSS rule on the ion-item element like this:
<ion-item class="label">
Related
I want to target some woocommerce elements on my website and change color and make some css changes. When using the inspector on my website I find:
<div class="woocommerce-form-coupon-toggle">
and assume I could write the following as a css code in wordpress
.woocommerce-form-coupon-toggle {
background-color #000000 !important;
}
When doing this, nothing happens.
The property and value in CSS should be separated by a colon :. Like the following:
.woocommerce-form-coupon-toggle {
background-color: #000000 !important;
}
Try to check for the whole tree, class by class. it should become a larger property, but would work.
body class1 class2 .woocommerce-form-coupon-toggle {
background-color: #000000 !important;
};
I assume you are styling the toggle coupon form in the checkout form. See image
You should be styling the .woocommerce-form-coupon-toggle .woocommerce-info not the .woocommerce-form-coupon-toggle alone.
To do this try this code.
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{
background-color: #000000 !important;
}
I work with Angular and use Angular Material
[https://material.angular.io/components/autocomplete/api][1]
[1]: https://material.angular.io/components/autocomplete/api
I would like add a border radius in my md-autocomplete but it doesn't work:
<md-autocomplete class="myclass">
.myclass{
background-color: rgb(250, 250, 250);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px
}
Do you have an explanation?
To change the drowpdown list styling, use .mat-autocomplete-panel classname:
::ng-deep .mat-autocomplete-panel{
border-radius: 10px;
}
This will affect all the autocompletes. If you have more than one and wish to style them differently, you can set different variable name and style accordingly. For example for the second one:
HTML
<md-autocomplete #mauto="mdAutocomplete">
CSS
::ng-deep .mat-autocomplete-panel#md-autocomplete-0{ //for the first one
::ng-deep .mat-autocomplete-panel#md-autocomplete-1{ //for the second one
DEMO
Do you want to put a border around the md-autocomplete or do you want the border to be around the md-form-field?
I believe you want it around the form field. See https://material.angular.io/components/autocomplete/examples for an example of the HTML.
If you open the following plunkr, it uses your css to style the md-form-field:
.example-full-width {
background-color: rgb(255, 0, 0);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px
}
https://plnkr.co/edit/DWzjsRNGXZsPRfjWRrI6?p=preview
I used red instead of 15% gray so it was more obvious.
I am styling some popups for a map displayed through Mapbox using Mapbox's GL JS. However, I cannot find in their documentation regarding the classes that are automatically assigned to the popups. Thus far, my CSS looks like this:
.mapboxgl-Popup-content {
color: #F3F3DD;
background-color: #91785D;
border-color: #91785D;
max-width: 250px;
box-shadow: 3px 3px 2px #8B5D33;
font-family: 'Oswald';
}
This yields these pretty little boxes:
My issue is the white triangle at the very bottom that points to the marker. I want to change its color.
I have tried a number of CSS classes to fix this. Including, but not limited to, .mapboxgl-popup, .mapboxgl-popup-anchor, .mapboxgl-popup-pointer, etc. I am not sure where to acquire the documentation I need to know what CSS class I should be using to change the color of this pesky triangle.
Here's what you need. It's not just one class because the tip can change position:
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
border-bottom-color: #fff;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
border-top-color: #fff;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
border-right-color: #fff;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: #fff;
}
The CSS class that you need to update is ".mapboxgl-popup-tip". If there is no any class like that in your CSS file, just create it and give the color what you want to "border-top-color: " attribute.
I figured out why applying CSS doesn't affect the element (in this case, the tip).
I did some debugging in Chrome with Inspect Element.
It turns out my CSS was indeed being applied; however, it was being overridden from the MapBox stylesheet I applied in my index.html.
At first, I thought that maybe if I reordered my stylesheets I could have my stylesheet be invoked after the MapBox stylesheet, then I'd be fine.
This was not true.
Inspect element still showed my CSS was being overridden.
The solution was to add !important:
border-top-color: black !important;
This would override any previous styling done by MapBox.
For more info see:
What do the crossed style properties in Google Chrome devtools mean?
https://www.w3schools.com/css/css_important.asp
.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }
i finally got it how this works. <Popup archor={'bottom'}, use .mapboxgl-popup-anchor-bottom plus .mapboxgl-popup-tip changing border color (top, bottom, left, right).
The new <p:ribbon> component in PrimeFaces 5.1 overrides the background attribute of spinner component buttons using the class .ui-ribbon .ui-button (ribbon.css), which makes the spinner look like this:
.ui-ribbon .ui-button {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: none;
color: #333;
}
When background rule is disabled in the browser, the spinner looks perfect
How can I write my CSS to make it ignore the background definition on .ui-ribbon .ui-button, so it can keep using the theme background definition?
You should try the following:
.ui-spinner.ui.ribbon .ui-button {
background: none!important;
}
OR if .ui-spinner is a container element:
.ui-spinner .ui-ribbon .ui-button {
background: none !important;
}
Basically, what this is saying is that when a spinner is also a ribbon, don't show a background on button even if it's already defined.
In the second case, it's saying when button is a child of ribbon which is also a child of spinner, then don't show a background even if it's already defined.
Edit:
Ah, so you're worried about overriding a previously applied background. Makes much more sense. In that case, change the above CSS to this:
.ui-spinner.ui.ribbon .ui-button {
background: inherit!important;
}
OR if .ui-spinner is a container element:
.ui-spinner .ui-ribbon .ui-button {
background: inherit!important;
}
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}