I want to change the placeholder color of Select component in Ant Design.
I've tried these below, but none of them work.
.ant-select-selection {
:placeholder-shown {
color: red !important;
}
&:placeholder-shown {
color: red !important;
}
:::placeholder {
color: red !important;
}
color: black !important;
&::-webkit-input-placeholder {
color: blue !important;
}
&:placeholder {
color: blue !important;
}
:placeholder {
color: blue !important;
}
::-webkit-input-placeholder {
color: blue !important;
}
}
::-webkit-input-placeholder {
color: blue !important;
}
I tried Hemanthvrm's suggestion, but it seems they changed the class name of the placeholder element to .ant-select-selection-placeholder in Ant Design 4. What worked for me was the following:
.ant-select-selection-placeholder {
color: #f0f0f0;
}
Please mind there's an opacity: 0.4; by default on the placeholder element, so whatever color you use will look faded out.
Also mind this placeholder styling behavior is not consistent across different Ant components. For example, to style the placeholder of the date-range picker I had to do the following:
.ant-picker-input input::placeholder {
color: #f0f0f0;
}
Bad news is, all these names might change again in a new major version. So better declare all the Ant related styles in one file, so your project becomes easily resilient to such changes.
This will work
.ant-select-selection__placeholder{
color : blue;
}
Working Sample
https://codesandbox.io/s/139lnkwwm3
I am new to AngularJS. How do I apply the ng-class to the alternating row in ui-grid with gridOptions?
It is kind of like with
ng-repeat (ng-class="$odd ? 'odd' : 'even')
You can achieve that with custom css:
Odd rows
.ui-grid-row:nth-child(2n) .ui-grid-cell {
background-color: //color you desire;
}
You can change colors with CSS:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: yellow;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: blue;
}
Also you can obtain CSS and experiment with changing other ui-grid styles here:
http://ui-grid.info/customizer/
Is there any way to style the text message within an ionic 2 toast?
I have tried this:
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
this.nav.present(toast);
}
But clearly you can't use html in the text so I am guessing the answer to my question is no?
You must add 'cssClass: "yourCssClassName"' in your toastCtrl function.
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true,
cssClass: "yourCssClassName",
});
than you can add any feature to the your css class. But your css feature went outside the default page'css. Exmp:
page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}
I was able to achieve a toaster color change by adding a custom class on the toaster create
let toast = this.toastCtrl.create({
message: 'Foobar was successfully added.',
duration: 5000,
cssClass: "toast-success"
});
toast.present();
}
In that pages scss file i then went outside the default nested page name ( because the toaster is NOT inside the root of ion page name thing). And all though this is a bit hacky i just explicitly targeted the next div element after the custom class that i added
.toast-success {
> div{
background-color:#32db64!important;
}
}
I say its hacky because you have to use the !important on it. You can avoid the !important by wrapping the .toast-success with .md,.ios,.wp{...
You can override the style default by overriding the main toaster variables in the theme/variables.scss file.
$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);
This will only override the default value though and not a custom value. there are a few more variables that can be styled as well.
First, import toast controller from ionic-angular and make object of that in constructor.
import { ToastController } from "ionic-angular";
constructor(private _tc: ToastController) {
}
After that wherever you want to show your toast message write that.
let options = {
message: "Your toast message show here",
duration: 3000,
cssClass: "toast.scss"
};
this._tc.create(options).present();
Here is my scss:
.toast-message {
text-align: center;
}
Or you can check best example from this link. I think it will help you. :)
Or else check the answer on this link.
If you define your own css class in app.scss (not in page.scss)
you can style it with .toast-wrapper and .toast.message
No need to use > div{
Example:
.yourtoastclass {
.toast-wrapper {
background: blue;
opacity: 0.8;
border-radius: 5px;
text-align: center;
}
.toast-message {
font-size: 3.0rem;
color: white;
}
}
in theme/variables.scss you can make a default
Example (red and little transparent):
$toast-width: 75%; /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
Ionic 2 provide a very useful way to override their component style you can override the toaster SASS variable in src/theme/variables.scss by adding
$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;
this will override the default style please refer to this Overriding Ionic Sass variable
You can accomplish, however you need to modify the toast component template itself.
Via explorer:
\node_modules\ionic-angular\components\toast\toast.js
Change line 194 (template):
{{d.message}} to <div [innerHTML]='d.message'></div>
You should be able to change any of the message styling in the css using .toast-message selector:
.toast-message {
font-family: Helvetica,
color: red
}
Or, if you look at the docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) there is a cssClass property you can use to assign your toast a specific class and then style that.
Change toast background color and opacity:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'changeToast'
});
and add app.scss:
.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};
It's used with .toast-message
I tried all above, still didn't work, therefore I come across a new solution, you need cssClass outside of page css declaration:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'toastcolor'
});
post-list.scss like this
page-post-list {
}
.toastcolor .toast-message {
background-color:skyblue;
}
Not sure about old Ionic versions, but in Ionic 5 you can't directly change inner CSS since it's encapsulated in the shadow
<ion-select>
#shadow-root
<div class="toast-container" part="container">
...
</div>
</ion-select>
so, to change .toast-container (for example) in your cssClass you should use:
.my-custom-class::part(container) {
flex-direction: column;
}
.my-custom-class {
.toast-container {
flex-direction: column; // will not work
}
}
I'm using ionic v5 with angular and
according to: https://ionicframework.com/docs/api/toast#css-shadow-parts
you can do something like this:
::ng-deep{
ion-toast::part(container) {
...
}
ion-toast::part(message) {
...
}
}
(This is really hard to explain) I am trying to create a new button class in Foundation like this:
.btn {
#extend .button;
#extend .small;
#extend .radius;
#extend .secondary;
}
It works fine and gets all the parent styles, except the hover state ones.
For example consider these:
A button
<!-- hover color is gray -->
and
A button
<!-- hover color is white, but it should be gray -->
I tried this, but it didn't worked:
.btn {
#extend .button;
#extend .small;
#extend .radius;
#extend .secondary;
.disabled {
#extend .disabled;
}
}
I am using the zurb-foundation gem with Rails 3.2.9.
Any idea how to fix it?
EDIT
Here is the generated CSS:
.button.disabled, .disabled.btn, .btn .btn.disabled, .btn .button.disabled, .button[disabled], [disabled].btn {
opacity: 0.6;
cursor: default;
background: #2ba6cb;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.button.disabled :hover, .disabled.btn :hover, .button[disabled] :hover, [disabled].btn :hover {
background: #2ba6cb;
}
.button.disabled.success, .disabled.success.btn, .button[disabled].success, [disabled].success.btn {
background-color: #5da423;
}
.button.disabled.success:hover, .disabled.success.btn:hover, .button.disabled.success:focus, .disabled.success.btn:focus, .button[disabled].success:hover, [disabled].success.btn:hover, .button[disabled].success:focus, [disabled].success.btn:focus {
background-color: #5da423;
outline: none;
}
.button.disabled.alert, .disabled.alert.btn, .button[disabled].alert, [disabled].alert.btn {
background-color: #c60f13;
}
.button.disabled.alert:hover, .disabled.alert.btn:hover, .button.disabled.alert:focus, .disabled.alert.btn:focus, .button[disabled].alert:hover, [disabled].alert.btn:hover, .button[disabled].alert:focus, [disabled].alert.btn:focus {
background-color: #c60f13;
outline: none;
}
.button.disabled.secondary, .disabled.btn, .btn .btn.disabled, .button[disabled].secondary, [disabled].btn {
background-color: #e9e9e9;
}
.button.disabled.secondary:hover, .disabled.btn:hover, .button.disabled.secondary:focus, .disabled.btn:focus, .button[disabled].secondary:hover, [disabled].btn:hover, .button[disabled].secondary:focus, [disabled].btn:focus {
background-color: #e9e9e9;
outline: none;
}
If what you are going for is a short cut for button small secondary radius then why don't you extend just that? It should produce a cleaner output.
.btn
{
#extend .button.small.secondary.radius;
}
Also make sure your custom CSS is referenced after foundation.css something could be overriding you.
After struggling for a while, I managed to solve it this way:
.btn {
#extend .button;
#extend .secondary;
#extend .radius;
#extend .small;
&.disabled {
#extend .button;
#extend .disabled;
}
Now it gives me the right ouput!
In my website, all my links are underlined when cursor mouse hover it. I have an exception for special cases. So I have some ActionLink where I would like links to be dotted and when hover links must be underline. I cannot achieve this.
Here is what I do:
#Html.ActionLink("Lire la suite...", "Details", new { slug = #post.Slug } , new { #class = "dotted-link" } )
The CSS:
.dotted-link
{
text-decoration: none;
border-bottom-style:dotted;
border-bottom-width: 1px;
}
The result:
The result when hover it:
As you can see, I have a dotted border and a plain border ?!
What is the best way to achieve this?
Thanks.
a.dotted-link {
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a.dotted-link:hover {
border-bottom-style: none;
}