I want to customize the placeholders which comes inside the modal i.e , those comes under class styled-input.
I tried with the following CSS but it doesn't seems working.
.styled-input::-webkit-input-placeholder {
color: blue !important;
}
.styled-input:-moz-placeholder {
color: blue !important;
}
.styled-input::-moz-placeholder {
color: blue !important;
}
Related
How is it possible to change ion-datetime value color?
Documentation https://ionicframework.com/docs/api/datetime#css-custom-properties show only css variable for the placeholder color.
But how the value color can be changed?
--color: has no effect.
When no CSS variable is defined on the Ionic element, you can simply use normal CSS declarations:
ion-datetime {
color: #f90;
}
This could be done in a single component's CSS file or globally to target all ion-datetime across the entire applicaiton.
Update
To target the placeholder without affecting values:
ion-datetime {
--placeholder-color: #0f9;
}
&:not(.datetime-placeholder) {
color: #f00;
}
I have achieved it like so on Ionic 5+/Angular:
global.scss
ion-picker>.picker-wrapper {
background-color: var(--dark-theme-color) !important;
}
.picker-opt {
color: #7994A2 !important;
}
.picker-opt.picker-opt-selected {
color: var(--ion-color-light) !important;
}
ion-datetime {
color: var(--ion-color-light) !important;
}
I've a website with 3 pages.
https://mywebsite.com/#
https://mywebsite.com/#features
https://mywebsite.com/#download
I want to change the some of the CSS based on which anchor I'm at.
Here's an example of what I'm trying to do, what I get and what I expect.
#header-outer #social-in-menu a i::before{
color: #000000;
}
This does change social button colors to black but on every anchor. I've tried to wrap it with a[href*="features"] so that it would only change in #features link but social icons remains white.
This is what I tried to achieve show social icons black only in #features anchor.
a[href*="features"] {
#header-outer #social-in-menu a i::before{
color: #000000;
}
}
This one has no effect. Changes nothing. First part of CSS however does change icons to black but on all anchors.
How can I achieve this?
What I try to have as the end result is:
a[href*="features"] {
#header-outer #social-in-menu a i::before{
color: #000000; /* could be a different colour */
}
}
a[href*="download"] {
#header-outer #social-in-menu a i::before{
color: #FFFFFF; /* could be a different colour */
}
}
You can do something like:
$(document).ready(function() {
$(document).on("click", "a", function(e) {
var id = $(this).attr("href").substring(1);
$(".parent").attr("id", id);
});
});
a {
color: black;
}
#features a {
color: red;
}
#download a {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
Home
Features
Download
</div>
What this does is basically update the id of the parent element that wraps your anchors. This solution doesn't use :target and involves the use of Javascript/Jquery.
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
I'm using wkhtmltopdf to generate a pdf of a page but it doesn't display any of the fonts in the correct colour, they all are presented black.
The colour is defined as you'd expect:
.panel-dashboard p.stat {
color: #bed000;
}
and displays correctly when viewed in the browser.
I'm calling it as
wkhtmltopdf path/to/page filename
Does wkhtmltopdf just not render font colours correctly? I've not been able to find any issues relating to this.
Appears this was a problem with wkhtmltopdf 0.9.9, 0.11 renders css font colors correctly.
Using version 0.12.2.4 specifying a white font inside the CSS (inside a grey background) worked, but a colored font (red, orange) did not:
.header { background-color: #888; color: #fff; } /* works */
.orange { color: f80; } /* doesn't work in wkhtmltopdf */
Using a style directly on the div did work:
<div style="color:#f60;">My Orange Text</div>
It may be because there is no background?? I don't know.
So if you try CSS and it fails this may work...
You are probably using this proposed CSS which has defined #media print { * { color: black !important; } }
Using version 0.12.6 here. Results look like following:
[pandoc.css] #media print { * { color: black !important; } }
[my.css] TODO2 { color: #700 !important; }
TODO3 { color: #700; }
[file.md] <TODO1 style="color: #700 !important;">black</TODO1>
<TODO1 style="color: #700;"> black</TODO1>
<TODO2> red</TODO2>
<TODO3> black</TODO3>
and
[pandoc.css] #media print { * { color: black; /* not important */ } }
/* or not using proposed pandoc.css at all */
[my.css] TODO2 { color: #700 !important; }
TODO3 { color: #700; }
[file.md] <TODO1 style="color: #700 !important;">red</TODO1>
<TODO1 style="color: #700;"> red</TODO1>
<TODO2> red</TODO2>
<TODO3> red</TODO3>
I want to set style for required and invalid fields for KendoUI items (for example different background color for required input).
Style that I am using is here:
.k-textbox>input[required],
.k-picker-wrap .k-input[required],
.k-datepicker .k-input[required],
.k-dropdown-wrap .k-input[required] {
background-color: yellow;
}
.k-invalid {
background-color: pink !important;
}
Here is jsfiddle: http://jsfiddle.net/spuljko/wTev8/8/
DatePicker works OK, but I can't set style for required or invalid combo box.
Try this,
.k-input, input.k-textbox, textarea.k-textbox, input.k-textbox:hover, textarea.k-textbox:hover, .k-textbox > input{
background-color: yellow !important;
}
.otherCombo .k-dropdown-wrap .k-input{
background-color: blue !important;
}
Demo:http://jsbin.com/ivoqup/12/edit