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
Related
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
trying to change the font of this link
<a class="navbar-brand text-uppercase" id="TopBrand" href="#Console"> Console System</a>
Whats the proper css for this?
???
a:link#TopBrand{
font-family: 'Revalia';
font-size: 12px;
}
The below solution which you've provided does work. However, there are also other options with which you can take.
a:link#TopBrand{
font-family: 'Revalia';
font-size: 12px;
}
Example:
you could use the declared id of TopBrand to target that specific anchor ( a ) element like so:
#TopBrand{
font-family: 'Revalia';
font-size: 12px;
}
or if you want to apply the CSS rules to all anchor ( a ) elements then use this:
a{
font-family: 'Revalia';
font-size: 12px;
}
EDIT
My problem was the position I had it in the link. OK so using
google fonts does it belong at the bottom or the top of my head links?
Before or after Bootstrap css and or my own custom css? I've seen
examples both ways!
Typically, placing it at the bottom of the head element should do the job.
I have an element of type=number. Since I am not interested in having the spin buttons show I added the -moz-appearance:textfield. Now, I noticed that the placeholder styling which I setup (::-moz-placeholder {font-style:italic}) has stopped being applied to this field, in FireFox.
Is FireFox creating a secret element around this moz-textfield or something? Why is it not working for this particular input?
EDIT:
Now I see that it has nothing to do with the textfield. It seems that FireFox does not allow any styling for a number field (even with textfield behavior). This does work in Chrome. Any idea for a neat workaround and why indeed is this the case?
input {width: 20em}
input::-moz-placeholder {font-style: italic; font-weight: 700; color: red}
input::-webkit-input-placeholder {font-style:italic; font-weight: 700; color: red}
.hiddenspinbutton {-moz-appearance:textfield}
.hiddenspinbutton::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;}
<input placeholder="This is text type" type=text><br>
<input placeholder="This is number type" type=number><br>
<input placeholder="Number type without spin buttons" type=number
class=hiddenspinbutton>
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
I have a webpage here: http://www.indiespil.dk/aitasi-under-construction-page/Aitasi/image/
I downloaded a HTML template, and I think it is using Bootstrap. I am no programmer, so this is the first time I am using HTML, CSS, Bootstrap and all that kind of stuff.
Everything is perfectly okay on my webpage as for now, except 1 thing: the text color in the second section, where it says "Competition", "Game wallet", "Indie Coins" and "Community"
These words are black, and I need them to be white instead.
The text is called as for now, which has the color code #000000 and a size of 18px.
I need the h3 to be used lower on the website, but I would like to make a custom header (h7 for instance) that has the same size as h3, but is white instead.
I tried making a h7 and it actually came out white and the same size, but when I entered h7 in my index file it didn't align, as the rest.
How can I make it align properly?
Thanks.
You dont need to create an H7 header element simply add the !important rule to a separate class in your css when changing the colour like this.
HTML
<h3 class="whiteTextOverride"> example with white text override </h3>
<h3> example with default colour </h3>
CSS
.whiteTextOverride
{
color: white !important;
}
This will override the colour set by bootstrap and allow you to choose a specific colour for the text in that header only.
P.S. its worth mentioning that you shouldnt go crazy with the !important feature in css as it can affect other classes if you are not careful with it so use it minimally and have a look at this article on when you should use it. Good luck!
Example
h3
{
color: red;
}
.whiteTextOverride
{
color: white !important;
}
.darkBackground
{
background: #000000;
}
<div class="darkBackground">
<h3 class="whiteTextOverride"> example with white text override </h3>
<h3> example with default colour </h3>
</div>
From what it looks like, I'm guessing the h7 tag was not aligned because the h3 element is preceded by the .service class. If you want to make a h7 you have to make sure it has a class of .service before the h7 tag in the css. The h3 tag is setup like so:
.service h3{
color: #000000;
font-size: 18px;
text-transform: uppercase;
}
You'd want to do something like this:
.service h7{
color: #FFFFFF;
font-size: 18px;
text-transform: uppercase;
}
Hope that helps.