I am trying to change the styles of a TextField element in Native Script for Android. At the moment I have got the text field displayed in black. I want to turn it white. Since the background is dark.
<TextField cssClass="tf_password" hint="Password" id="password" text="{{ user.password }}" secure="true"/>
Any help is appreciated.
If you want the text white and the background black you can set this in your CSS file:
#password {
background-color: black !important;
color: white !important;
}
Your problem is not how to change the text color of a TextField but the placeholder color:
#password {
background-color: #000;
color: #fff;
placeholder-color: #fff; /* ideally different color than normal color */
}
You can see a working example in NativeScript Playground
If you want to change the color of TextField, it that case you can simply give color property to TextField. If you are looking to change hint color than you can use the placeholder-color property:
<TextField hint="Password" id="password" text="{{ user.password }}">
</TextField>
The CSS would be
TextField {
color: #ffffff; // used to define color of input field
placeholder-color: #000000; // used to define color of hint
}
Related
I have a group of ToggleButtons on my application whose background colors I would like to change. Currently my code gives all the buttons a gradient of <.untoggled-button> and the unselected buttons have that gradient with an added blue film. I have two problems: I want to remove the blue film on the untoggled buttons and I need to access the toggled button to change it's styling. <.toggled-button> is just a placeholder that doesn't do anything right now.
I'm wondering how to access the unchecked and checked versions of the ToggleButtons in my css, as to override the default bootstrap styling!
the jsx:
<ToggleButtonGroup className="view" type="radio" name="options" defaultValue={2}>
<ToggleButton value={1} className="untoggled-button" > title</ToggleButton>
<ToggleButton value={2} className="untoggled-button"> title</ToggleButton>
<ToggleButton value={3} className="untoggled-button"> title</ToggleButton>
</ToggleButtonGroup>
the css (this is very incorrect, but I'm hoping to be able to style both unchecked and checked buttons):
.untoggled-button{
background-image: some gradient !important;
}
.toggled-button {
background-image: another gradient !important;
}
setting the background color to transparent and adding a .active class seems to have worked!
.untoggled-button{
background-image: some gradient !important;
background-color: transparent !important;
}
. untoggled-button.active {
background-image: another gradient !important;
}
I'm creating a form where once it has been submitted, I want to remove the background colour of the input.
If I use Google Autofill on an input, the background color and color attributes are ignored.
In dev tools it's showing that my styles SHOULD be visible, but they're not.
input:disabled, textarea:disabled, .disabled {
background: #060301;
color: #f0eef3;
}
/* Annoyingly we have to override Chrome styles */
input:-webkit-autofill:disabled,
textarea:-webkit-autofill:disabled,
input:-internal-autofill-selected {
background: #060301!important;
color: #f0eef3!important;
}
It works fine unless autofill was used.
Any ideas?
You can re-set the value of the input field right before disabling it. That will reset Chrome's autofill status.
inputField.value = inputField.value
inputField.disabled = true
The only way to achieve the desired effect - at least visually - with only CSS is to colorize the background using a large inset box shadow rather than setting the background color. The latter is locked by the user agent stylesheet.
Set a background color for all disabled input elements of type="text": You can add the disabled attribute in html and add background.
Reference
input[type=text]:enabled {
background: #ffff00;
}
input[type=text]:disabled {
background: #dddddd;
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>
I have a search box and I want the color of the text in white.
I changed the placeholder color to white and the text color to white, but the text color only turns white when the person clicks out of the form (while typing it remains the grey Bootstrap color).
How can I change it? My style.scss code:
.form-control {
background-color: transparent !important;
color: white;
&::placeholder {
color: white;
opacity: 1;
}
}
For your problem focus pseudo class should work:
#searchFieldText:focus { // set your searchbox with focus pseudo class
color: #fff; // put your color here
}
Let me know if this works.
I think your styles is overrided somewhere. Please look at working example from my fiddle:
https://jsfiddle.net/zmpLru0x/1/
<input class="form-control" placeholder="Example placeholder" type='text'>
.form-control {
background-color: transparent !important;
color: green;
&::placeholder {
color: red;
opacity: 1;
}
}
In above example you can easily control placeholder color using method you provided. When you change color to white also placeholder and text will be white.
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
By default tt-input is transparent, I want to change its background color when on focus to be white, but when I change the color the hint is not shown anymore because it's hidden by the new color.
How can it be changed?
The background-color: transparen has been set as an inline style with javascript.
You should overwrite it by using !important.
for <input class="typeahead" type="text" placeholder="States of USA"> you should use:
.typeahead.tt-input {
background-color: black !important;
}
Also see: https://github.com/twitter/typeahead.js/issues/677