I could able to remove .ui-state-default in the inspector panel, but I need to know how could I able to do it in the html or css
Simply set those styles to default at the end of your CSS file.
.ui-state-default {
border: none;
background-color: initial;
color: initial;
}
You can do something like this:
.ui-state-default
{
border:unset;
background:unset;
color:unset;
}
Related
I have an Angular Material Paginator that looks like
I want to style it and it should look like
I am having a very difficult time to style it. I was just able to move the elements in the paginator around(start and end positions), apart from this I was not able to modify anything.
Please let me know how to do the required styling ?
Here is the stackblitz link https://stackblitz.com/edit/angular-tjhkpo
Use this css(for more style open F12 and override material declaretion):
See working code
::ng-deep .mat-paginator-page-size-select {
width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
background-color: transparent;
}
::ng-deep .mat-select-value {
color: #005999;
font-weight: bold;
font-size: 15px;
}
::ng-deep .mat-select-arrow {
color: #005999;
}
::ng-deep .mat-option{
padding: 0!important;
}
::ng-deep .mat-option-text {
text-align: right;
}
For captions modifying you should provide MatPaginatorIntl. Example
If you use separate style for components and you want style child component you need to use in your css style ::ng-deep before you style child component selector, for example:
::ng-deep .mat-select-value {
border: 1px solid red!important;
}
When using ::ng-deep try to add more restrictive selectors so that you reduce the risk of side-effects e.g.
::ng-deep {
.mat-select-panel[aria-label="Items per page:"] {
.mat-option-text {
font-size: 1.4rem;
}
}
}
I am using firebase authUI. Here is a demo: Click on Sign in with Email
I try to change the color of the 'blue' underline that is appearing when clicking in the input field. But I just can't figure out which element in the css I would need to change. I tried almost everything but I am missing something here. Maybe someone has an idea for me?
I only found out how to change the color of this border when it is not clicked:
.firebaseui-textfield.mdl-textfield .firebaseui-input {
border-color: rgb(209,74,74);
}
If you add the class .is-focused manually to the div which contains the input and label.
That will force the focus state which you can inspect and modify the source accordingly.
I had a look myself, and if you want to change the border color, then add this...
.firebaseui-textfield.mdl-textfield .firebaseui-label::after {
background-color: magenta;
}
Change the color as you wish. You might need to use important to override it.
For Ionic users, place it at the end of your variables.scss file.
Don't forget the !important keyword.
Example to change buttons, text border, progress-bar and links color:
.progressbar {
background-color: var(--ion-color-primary) !important;
}
.mdl-button--raised.mdl-button--colored {
background-color: var(--ion-color-primary) !important;
}
.mdl-button.mdl-js-button.mdl-button--primary {
color: var(--ion-color-primary) !important;
}
.firebaseui-textfield.mdl-textfield.firebaseui-label::after {
background-color: var(--ion-color-primary) !important;
}
a.firebaseui-link {
color: var(--ion-color-primary) !important;
}
.progressbar {
background-color: var(--ion-color-primary) !important;
}
.bufferbar {
background-image: none !important;
background-color: var(--ion-color-secondary)
}
.auxbar {
background-image: none !important;
background-color: var(--ion-color-primary) !important;
}
Result:
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
Footer css after form's css is not working , what is the problem in this css code?
/*------------------------------------*\
FORMS */
fieldset { padding: 10px; border: 1px solid #ccc; margin-bottom: 1.5em; }
label { display: block; cursor: pointer; }
label:after { content:\": "; }
label::after { content:\": "; }
input,textarea { font-family: inherit; font-size: 1em; line-height: 1.5; }
[placeholder] { cursor: pointer; }
[placeholder]:active,[placeholder]:focus { cursor: text; }
fieldset > :last-child { margin: 0; }
footer {background:red; height:200px; width:200px}
jSfiddle http://jsfiddle.net/Aw239/
in jsfiddle example footer should be red background.
At least firefox Doesnt seem to understand this label:after { content:\": "; } i have no idea whats going on here but all i know is that it is the culprit. I've never actually used content properly.
But, remove those lines and everything runs smoothly.. ( OR reformat those two lines as Kyle showed and it should do it. )
Seems like it doesnt like to have closing semicolons in the same row with everything else
http://jsfiddle.net/Aw239/3/
Or.. get rid of the \'s ?
I formatted your CSS a bit and it seems to work in my FF5. http://jsfiddle.net/Aw239/2/
It is red. Are you using IE8? Because you'll need to use the HTML5 shim if you want to style HTML5 elements.
Does this work for you?
Question is in the subject.
Demonstration :)
textarea:focus
{
background-color: #00ff00;
}
You can use CSS pseudo-class selectors like this:
textarea:focus { background-color: red }
Note that this doesn't work IE7 and lower.
input[type='text']:focus {
background-color: #0066FF;
}