Not able to change placeholder opacity in ionic v4
i have tried to change opacity of ion-select placeholder in
global.css
following is my code
.select-placeholder
{
opacity: 1 ;
}
but that didn't works , even i tried all methods to change it's css like
ion-select{
--placeholder-opacity: 1 !important;
}
ion-select{
--opacity: 1 !important;
}
ion-select{
opacity: 1 !important;
}
etc... but not works fine , event it color change very well using following code
ion-select{
color: var(--ion-color-secondary);
}
no change , it took default opacity <style> tag.
Any help would be appreciated
Edited
<ion-select class="contact-us-select" interface="alert" [interfaceOptions]="customPopoverOptions"
placeholder="selection" cancelText="cancel" okText="done" (ionChange)="onSelectChangevalue($event)">
<ion-select-option *ngFor="let item of Data" [value]="item.id">{{item?.title}}</ion-select-option>
</ion-select>
ion-select{
--placeholder-opacity: 1 !important;
color:black;
}
I'm afraid that's a bug of Ionic 4 (still happening in Ionic 4.4 as you can see in these github issues: 17446, 17166 and 17248).
Unfortunately, since you cannot access directly to the shadow DOM to change that value, there's no much we can do to fix the issue for now.
One of the users suggested using a label as a workaround (here) or even modifying a file from the node modules folder (here) but I guess a better workaround would be to preselect the first value by default. So for example if the options are Phone, Email, Live Chat, instead of showing the placeholder, you could preselect Phone by default until this bug is fixed in Ionic's core.
global.scss
ion-select{
opacity: 0.3 !important;
color: var(--ion-color-secondary);
}
that should work fine for changing global scss, you only need -- for changing scss variables defined in the component.
You should try this in css file:
.select-ios .select-placeholder{
color: #000;
font-size: 13px;
}
Go to this path:
[YOUR_PROJECT_PATH]/node_modules/#ionic/core/dist/esm
Look for this files:
ion-select_3-ios.entry.js
ion-select_3-md.entry.js
open it, and find:
.select-placeholder{color:currentColor;opacity:.33}
change it to what you want
I think the following code will help you, I tried on text box's placeholder, it works. For text box placeholder my code work, but for selection box I am not sure but, according to your code I think the following code may help you. Also, Run Code Snippet in which I code it for text box's placeholder.
select::placeholder {
opacity:0.5;
}
input::placeholder {
opacity:0.5;
}
<input type="text" placeholder="Input box">
I had same problem with ionic 4, this was my solution and works perfect
CSS
ion-select.industry-group:before{content:"Select industry"}
ion-select<your class>:before{
content: "Select Industry"
opacity: 1;
color: #00000
}
no placeholder in html
<ion-select class="industry-group" [formControl]="industryGroupFormControl" ok-text="Ok" cancel-text="Cancel">
Related
i'm trying to remove the light gray line that's next to the darker gray line:
After searching the rechart library through and through i decided to try and hide it with a css file.
this is the code :
.recharts-layer.recharts-cartesian-axis-tick line{
display: hidden;
}
I've also tried :
.recharts-cartesian-axis-tick-line{
display:hidden !important;
}
and still doesn't work.
it's important to note that the css file is linked and when trying to style something else it works.
this is what i see when i inspect and pick the element in the dev tools :
any help will be appreciated!
What you need to do is remove the tickLine from YAxis.
Something like that:
<LineChart>
...
<YAxis tickLine={false} />
...
</LineChart>
You can check more about it in docs API.
I am working on my first web dev project, with someone, and I am responsible for the front-end part. In my personal projects I've been using plain css, but in this template I have seen that they are using something else, a different structure, I think. I kind of figure it out how it works, but because I never crossed paths with it before, it makes developing hard for me. I would like to know what it is so I can read some documentation and understand it better. (as an example: usually ,when I use className, I put the class name between "", but here is like css.something) Can you tell me what it is ? I will leave a snippet here
.menuItem {
#apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
position: relative;
min-width: 300px;
margin: 0;
padding: 4px 30px;
display: flex;
align-items: center;
justify-content: center;
/* Override button styles */
outline: none;
text-align: left;
border: none;
white-space: nowrap;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
}
&:hover .menuItemBorder {
width: 6px;
}
}
<button className={css.menuItem} onClick={()=> this.selectOption(queryParamName, option.key, dates)}>
This is CSS Modules and you can read more about this usage of CSS in these 2 links:
link1
link2
Although I'm not overly familiar with React, this (className={css.menuItem}) is some sort of model binding so that when React has done it's thing it will bind the value of css.menuItem to the rendered HTML probably ending up with something like
<button className=".menuItem" ...>
The Javascript format you see there is a view binding, or something we might describe as a Domain Specific Language (DSL). It is Javascript used by some framework (likely React or another frontend framework) to build the HTML you see on the page. I can't be certain since I don't know what framework I'm looking at, but I'm willing to bet that if you use the "inspect" feature in your browser, you will see this in the resulting HTML that is created by that Javascript:
<button class="menuItem" onClick="[...]">
This format should look familiar to you if you are expecting plain HTML. That Javascript you linked to just builds this HTML dynamically. In the example you provided, the curly braces ({ }) are just an indicator to the Javascript library that it need to fill in that placeholder with something, in this case css.menuItem, which translates to a class name of menuItem rendered into a css class tag (class="menuItem").
Have you looked into what that css object holds?
From what I can see, the #apply puts the css part to be in pre-compiled language like SASS or SCSS.
You have not mentioned if it is ReactJS. If it is then there is a high possibility that whatever you are dealing with is in JSS.
I have few buttons in my webpage. I need to change the backgroundcolor & font-color when it is clicked. I have tried this,
<div class="card-body">
<h6 class="card-text">Data</h6>
<button ion-button block (click)="viewMore('data');
displayPopup('data');" >
ViewMore</button>
<button ion-button block (click)="display('data');" >Display</button>
</div>
Likewise I have few more divs. Now I need to change the css of the viewmore button when it is clicked.
My css:
button:focus{
background-color: blue;
}
button:active{
background-color: red;
}
Now it is working for second button, when I click the first button popup comes & after closing the popup button css has not changed. Can somebody please suggest me?
The easiest way would be to use CSS pseudoclasses like you did.
For clicked - or visited - elements, there's the :visited pseudoclass.
You should be familiar with basic css. W3schools is an awesome resource.
So in your case:
button:visited {
background: red;
}
:focus is - as the same says - for the element which has focus.
Or:
button:active,
button:visited,
button:focus {
background: red;
}
Your question it's not clear. The way to use ngStyle or ngClass otr style.attrib is used a variable and ternary operator. As you has severals buttons you need several variables. this variables can be a property of an object or an array. As an array
//You have an array
buttonsClicked:boolean[];
//In your .html
<!--use index 0 for the first button, index 1 for the second button... -->
<button ionbutton block [style.background-color]="buttonsClicked[0]?'red':'green'"
(click)="buttonsClicked[0]=true;
viewMore('data');displayPopup('data');" >
ViewMore</button>
....
</div>
//when you close the popup you can clear all the buttonsClicked
this.buttonsClicked=[] //<--reinit the array
I need to style enabled checkbox to look like disabled, but style="background: #e4e4ee4;" doesn't work. Could someone help me? How to make checkbox to look like it has attribute disabled with css? (Case with usage attribute disable is forbidden).
You could set opacity instead of background.
Simple Example:
https://jsfiddle.net/gfb0gc3h/2/
<input type="checkbox" class="mycheckbox"/>
.mycheckbox
{
opacity:0.5;
}
As adopted from Nezure's answer, but don't forget to add the pointer-events property and set it to none to prevent clicks!
.disabled-checkbox {
opacity:0.5;
pointer-events: none;
}
Example: https://jsfiddle.net/gfb0gc3h/67/
I mean you can just disable it within the HTML code.....is that what you're trying to do?
I have searched everywhere and cannot find how to change the text color of Chrome's shadow DOM input date element. Most placeholders have a soft gray color but Chrome's shadow DOM text is black and then when you add the date, the text color stays the same. Chrome already has shadow DOM text as "mm/dd/yyyy" and that's the text color that I need to change.
<input type="date"/>
If the input field is required you can use the :invalid selector like this:
input[type=date]:invalid::-webkit-datetime-edit {
color: #999;
}
<input type="date" required /><br>
Another solution is to add a class to the input which you remove when a value has been entered.
var el = document.getElementById('date');
el.onchange = function() {
if (el.value === '') {
el.classList.add("empty");
} else {
el.classList.remove("empty");
}
}
.empty {
color: #999;
}
<input type="date" id="date" class="empty" />
NOTE: My second example (the one with a class) will be applied in all browsers.
A similar question has been answered before, but it didn't work for me.
Adding my super simple React solution here, for anyone who needs it!
/* placeholder text style */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
color: #888;
}
/* regular text style */
input[type="date"].date-input--has-value::-webkit-datetime-edit-text,
input[type="date"].date-input--has-value::-webkit-datetime-edit-month-field,
input[type="date"].date-input--has-value::-webkit-datetime-edit-day-field,
input[type="date"].date-input--has-value::-webkit-datetime-edit-year-field {
color: #f8f9fa;
}
<input
type="date"
name="date"
className={(this.state.date) ? 'date-input--has-value' : ''}
value={this.state.date}
onChange={this.handleChange}
/>
Basically just trigger a CSS class based on whether the state value exists or not. Only works for controlled components, obviously - but if you already have this set up, then adding a quick conditional operator and some CSS styling is really easy!
The colors I used are what I needed for my dark-theme website, but you can obviously change them to whatever you like. The four different CSS selectors are needed to fully target the entire text field - the first one targets just the '/' (or '.', depending on locale) date separators, and the next three individually target the month, day, and year parts of the field, respectively. Yes, you could make each individual one a different color, if you felt the need...
--
Ignore the 'Run code snippet' bit, as it obviously won't work without a full React component connected up and so on. I just used the snippet view, as it's a nice way to show both CSS and HTML side by side.
Better easy way by CSS is just to it like this:
input[type=time]{
color: blue;
opacity: 34%;
}
You can do it like this:
input[type=date] {
color: #FFFFFF;
}