I am trying to simply change the color of a text/password input. Unfortunately, everything to be able to change is hidden behind the #shadow-root so my CSS can't touch it.
I've tried to simply write:
input {
color:var(--ion-color-primary) !important;
}
but of course it does not see anything inside the shadow realm. the HTML is laid out like so:
<ion-input _ngcontent-c0="" class="form__group__item--input ng-untouched ng-pristine ng-invalid hydrated ion-untouched ion-pristine ion-invalid has-focus" formcontrolname="email" type="text" ng-reflect-name="email" ng-reflect-type="text">
#shadow-root
<style></style
<input> // Need to edit this one
<slot></slot?
<input type="hidden" class="aux-input" name="ion-input-0" value="">
</ion-input>
The css that's controlling the color of the input is not using a variable that I'm able to change anywhere else
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
but I'm not able to override those. I feel like I need to do something in the root, but I don't know CSS variables yet.
is there any way in Ionic 4 to change the input text color??
Doing a quick Google search brought up this site which explains you can use the ::shadow pseudo-element to style elements within shadow trees, so try this
ion-input::shadow input {
color: var(--ion-color-primary);
}
Edit:
Doing some more digging around I found this SO post which says you can't style things inside the shadow DOM with global CSS, so you need to instead create and append a style tag to the host.
// host is the element that holds the shadow root:
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);
Native input in ionic4 inherits text color so you just have to set css color of ion-input.
HTML:
<ion-input placeholder="Muhahaaaa"></ion-input>
CSS:
ion-input {
--placeholder-color: green; /* placeholder text color */
color: var(--ion-color-primary; /* input text color to primary */
}
Reference to ionic code (4.0.0-beta.11):
https://github.com/ionic-team/ionic/blob/master/core/src/components/input/input.scss#L43
Related
Can anyone help me with changing the colour of mat-select box and how to style the box to have rounded corners.
I tried by giving it the background-colour property but it is not affecting my element.
html
<mat-form-field appearance="outline">
<mat-select class="topunit">
<mat-option *ngFor="let x of filteredData [value]="x">{{x.name}} - {{x.place}}
</mat-option>
</mat-select>
</mat-form-field>
css
.topunit{
background-color: white;
margin-top: 5%;
padding: 0 0.75em 0 0.75em;
width: 75%;
align-items: baseline;
border-radius: 20px;
}
Severals controls of material angular use cdk to create a div cdk-overlay-container outside our app. So if we want to change the .css we need use style.css (not the .css of the component)
Futhermore, usually this controls has a property: "PanelClass" that allow us only change this control -not all- (*)
So you can write in styles.css, e.g.
.topunit.mat-select-panel
{
background-color: red;
}
And in your .html
<mat-select panelClass="topunit">
...
</mat-select>
(*) see that if we only write in styles.css
.mat-select-panel
{
background-color: red;
}
All ours pannels with class mat-select-panel becomes red.
You have to use ::ng-deep to force a style down to child components. This selector had an alias, in this case ::ng-deep
EXAMPLE:
::ng-deep .mat-select-panel{
background: red !important;
}
this way you will override mat-select-panel background color.
the best way to find the classes you need to change is using the browser element inspector
I try to display select option text with a Poppins font. The class is
.poppinsregular14diese00000061 {
font-family: Poppins;
font-weight: 400;
font-size: 14px;
color: #00000061;
}
The fiddle is the following : https://jsfiddle.net/flamant/dvzh57wu/14/
But the displayed text is not showing the same as the same type of class text within a div or a text input
Looks like .custom-select-lg class overrides your font-size (1,25rem), than on the hierarchy, .custom-select will override your font-size to 1rem. If you really want that 14px to apply to the options, than use inline style
<select class="browser-default custom-select custom-select-lg mb-3" style="float:left;width: 255px;height: 40px; font-size:14px" placeholder="By myself" formControlName="byWho">
On the other hand, I don't really advise inline styling as you did, code becomes messy after a while
I am trying to add custom css style to my caldera forms on a wordpress website.
what i am trying to achieve is to add a hover style to my fields of radio checklist
Right now i was only able to add style to the bullets ,I am currently stuck with adding a hover style to the fields
this is the link to the form
https://purdywordy.com/order-here/
This is the CSS that i have used
.caldera-grid input[type=checkbox]:hover,
.caldera-grid input[type=radio]:hover {
cursor: pointer;
}
input[type=radio]:before,
input[type=checkbox]:before {
font-family: FontAwesome !important;
font-size: px;
}
input[type=radio]:before {
content: '\f111';
border-radius: 50%;
padding: 0px 15px 0px 0px;
}
input[type=checkbox]:before {
content: '\f14a';
color: red;
background: red;
border-radius: 3px;
padding: 2px;
}
input[type=radio]:checked:before {
color: red;
}
When inspected, your form (HTML) is structured like this:
<div class="radio">
<label>
<input type="radio">
</label>
</div>
Since you have used nested input inside of a label, you don't even need for/id attributes, but I am guessing that is automatically generated by the form. Btw, do you have control over the structure of HTML or the proposed form simply spits it out?
For your current structure, you could style it like this:
.radio:hover > label {
/* add the style for the label */
}
.radio:hover input[type="radio"] {
/* add the style for the radio button */
}
Whatever you need to apply the style to, "listen" for a hover on the parent and then target its direct children. You get the point.
EDIT: My bad. I have said that input is nested inside of label. Therefore, radio:hover > input will not target it. Omit the > and it will target any input inside div with the class .radio. Sorry for the possible confusion. You can learn more about CSS selectors and differences between them here.
This should work. Your radio buttons and labels sit inside a class of 'radio'. You can remove the .form-group reference here unless there are other places on the page that you don't want this styling to apply to.
.form-group .radio:hover {
cursor: pointer;
background-color: grey;
border: 2px solid blue;
border-radius: 5px;
// other hover properties
}
I'm new to CSS and I'm trying to add a background image to a button. I have a simple input button that I'm using as a toggle for displaying a div. I want to put an image in the button. I'm using the following HTML.
<input type='button' id='toggleButton'>
When I view this in my web page in Firefox 9.0.1 it looks great:
I applied the following style to it to add my image:
#toggleButton {
background-image: url("plus.png");
background-repeat: no-repeat;
background-position: center;
}
As soon as I apply the background image the button becomes very plain:
I used Firebug to examine the computed style of both buttons and it didn't show any difference other than the style I appled and some minor changes in border width (from 2.5px to 1.66667px). I added border-width: 2.5px; to the style and it didn't help.
My image has an alpha channel and only the black of the plus sign should show. My understanding of CSS is that the original button's style should still be applied and my button only adds the background image. I expected to end up with a button that looks approximately like this:
How do I add the background image and keep the fancy button look?
How about try something like this if you just want to add a plus symbol:
Html:
<input type='button' id='toggleButton' value="+" />
CSS:
#toggleButton {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
text-align: center;
padding: 3px;
color: #444444;
}
Please try making your button picture to circular bead.
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}