I am trying to change the font family of the placeholder of an <ion-input>.
In docs, there is no way to do it, since the only possible options for placeholders are --placeholder-color, --placeholder-font-style, --placeholder-font-weight and --placeholder-opacity.
This is the HTML:
<ion-input required
type="text"
maxlength="30"
placeholder="Your username">
</ion-input>
What I already tried without success:
ion-input::placeholder {
font-family: 'My-font', sans-serif;
--ion-font-family: 'My-font', sans-serif;
}
and I tried to replace the ::placeholder with ::-webkit-input-placeholder, :-ms-input-placeholder, :-moz-placeholder.
What I'd like to achieve:
ion-input {
--placeholder-font-family: 'My-font', sans-serif;
}
Placeholder font just inherits from the input font. If your input font and placeholder font can be the same, then just apply the css style to your input element.
ion-input {
--ion-font-family: 'My-font', sans-serif;
}
Related
I am working on the Ionic 5 application for iPad/Tablet. I want to increase the font size of ion-input for full app.
I have tried various options
ion-input {
font-size: 20px !important;
}
input {
font-size: 20px !important;
}
But none of it is increasing the font size. I have even tried to increase the browser inspect element there also it has increased the space but font size is same.
My code structure is
<ion-item class="ion-padding-horizontal">
<ion-label class="input-label" position="stacked">Email</ion-label>
<ion-input class="input-text" type="email"></ion-input>
</ion-item>
When I give font size in the input-text class it is just increasing the size of the input, not the font size
make sure you input is in an ion-item element and then give it your class like this:
CSS:
.size {
font-size: 30px;
}
HTML:
<ion-item>
<ion-input class="size"></ion-input>
</ion-item>
I tested it just now. it works.
In Ionic 4, I know that for some things I'm supposed to use shadow dom, and modify components like this:
ion-button {
--ion-font-family: 'Montserrat', sans-serif;
--border-radius: 8px;
}
But what if I want to change the font weight of the button?
If you look at the css for the button, you'll see that there's no shadowdom css variable for weight like there is for padding or font-family:
.sc-ion-buttons-md-s ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 8px;
--padding-end: 8px;
--box-shadow: none;
height: 32px;
font-size: 14px;
font-weight: 500;
}
The only way I can do it as far as I can tell is to do inline styling like this:
<ion-button color="primary" fill="solid" shape="round">
<p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>
But now I feel like its 1996 all over again. What's a clean way to do this?
i added:
ion-button {
font-weight: 700;
}
to one of my random projects and it works as expected.
i then added the <p> </p> tags like you have in your example code inside my button with the text for the button and the font-weight no longer effected the text.
maybe remove the <p> </p> tags if you are using them then try again.
I'm trying to change the color and the size of the letter inside the ion-toolbar but without success, what I've tried so far:
ion-toolbar {
--background: var(--custom-primary); //works
--color: #FFFFFF; //works letters, not icon
ion-buttons {
font-weight: bold; //works
--icon-font-size: 10px !important;
}
ion-back-button {
--icon-font-size: 30px !important;
}
}
You can directly style your toolbar in the template. E.g.:
<ion-toolbar color="green">
...
</ion-toolbar>
Check out these docs https://ionicframework.com/docs/theming/advanced#themes. Theming ionic core components like the ion-toolbar is a little different.
I am using Typekit to load the league-gothic font and for some reason Safari is completely eliminating the word-spacing so there are no gaps between the words. Before I go with a css hack, I was wondering if anyone could help. Here is the html:
<div class="page-header">
<h1 data-name="about">About Campaign Title</h1>
</div>
And here is the CSS:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
}
I tried placing an h1 tag all over the page and still saw the problem. I also set word-spacing to both inherit and normal, seeing the same result.
Thanks.
This turned out to be a problem with the new text-rendering property. We are using bootstrap.css from Twitter and Bootstrap had the text-rendering property set to optimizeLegibility. We set it back to auto as follows:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
text-rendering: auto;
}
I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?
You may be looking for
-webkit-appearance: none;
Safari CSS notes on -webkit-appearance
Mozilla Developer Network's -moz-appearance
Please add this css code
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I recently came across this problem myself.
<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->
Hope that helps.
Use the below css
input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none; /*For Chrome*/
-moz-appearance: none;/*For Mozilla*/
appearance: none;
border-radius: 0;
}
h2 {
margin: 25px 0 10px;
font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />
<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
I had the same issue today using primefaces (primeng) and angular 7.
Add the following to your style.css
p-button {
-webkit-appearance: none !important;
}
i am also using a bit of bootstrap which has a reboot.css, that overrides it with (thats why i had to add !important)
button {
-webkit-appearance: button;
}
-webkit-appearance: none;
Note : use bootstrap to style a button.Its common for responsive.