I use a CSS framework (Bulma). However, I would like to design my input field a little differently. For example, it should have a red border.
I use scss. However, it does not work. When I import my class, the border is not displayed in red.
How can I adapt my input field in addition to the CSS framework, e.g. so that I have a red border?
import React from 'react'
import './style/General.scss'
function General() {
return (
<div>
<div className="field">
<p className="control has-icons-left has-icons-right">
<input className="input section-changing-input" type="text" value="Hello" />
<span className="icon is-small is-left">
<i className="fas fa-futbol"></i>
</span>
</p>
</div>
</div>
</div>
)
}
export default General
General.scss
section-changing-input {
input {
border-color: crimson !important;
}
}
Make sure you have imported the Bulma CSS library before your custom CSS. Otherwise, the custom CSS changes you make will not be applied.
Bulma's input borders are set with the $input-border-color variable. If you're compiling Bulma in with your own scss files, then simply declare that as red before importing Bulma.
Related
I'm using a date input with bootstrap-datepicker to show a calendar for the user to pick a date. I'm trying to change the background and head's color, and it is not working
Here is my HTML code:
<div class="row mb-1">
<label class="col-lg-4 col-form-label col-form-label-sm"
for="time">End Date</label>
<div class="col-lg-8 form-group">
<input id="endDate" type="text" placeholder="To" class="form-
control" bsDatepicker
[bsConfig]="{ adaptivePosition: true, dateInputFormat:'YYYY-MM-D
D' }" [(ngModel)]="selectedEndDate"
(ngModelChange)="updateMyEndDate($event)" [ngModelOptions]="
{standalone: true}">
</div>
</div>
I tried to change the color using those lines of code but didn't work:
.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td span.selected,
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after,
.bs-datepicker-body table td.active-week span:hover
{
background-color: rgb(35, 87, 185) !important;
}
.bs-datepicker-body table td.week span
{
color: #6e8f88 !important;
}
Any tips to make it work ?
Component styles normally apply only to the HTML in the component's own template.
Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule.
If you do the datepicker styles in the style.css for example, I often have to use the /deep/, ::ng-deep or >>> modifiers. In your case that would be ::ng-deep .bs-datepicker-head,
You might also look at theming bootstrap
"Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets."
I have a form input like this (label text is black):
When I type something in it (and after leave the field), it stays like this (label text is gray):
How can I keep the label black?
This is my input code:
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="label-black">#Html.LabelFor(g => g.Street)</label>
<input asp-for="Street" class="form-control" />
</div>
</div>
</div>
I don't recognize that style as being from twitter-bootstrap, but if it is then the following CSS rule should override it:
label.label-black {
color: #000;
}
If this is not sufficient to override the current style you may need to further specify the selector:
form .form-group label.label-black {
color: #000;
}
Note: That rule must be applied after any other CSS declarations in order to override them.
And finally if doesn't work, then there may be some JavaScript involved, in which case no amount of CSS over specification will help, since the JS style will be applied later.
I have an angular expansion panel as shown below.
But I want to change the the design of the arrow to something like this:
Not expanded:
Expanded:
How? or is it possible for me to do so in angular material?
Code below:
HTML:
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
TS:
import {Component} from '#angular/core';
/**
* #title Basic expansion panel
*/
#Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
Yes it is possible. Give your expansion panel a reference id e.g. example and set the hideToggle property as true.
In the <md-panel-description>, you can place your icons and use the expanded property of the panel to show or hide the relevant icons.
<md-expansion-panel class="custom-header" hideToggle="true" #example>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
<md-icon *ngIf="!example.expanded">play_arrow</md-icon>
<md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
To provide space between the icon and panel description, add the following classes in your component.css:
.custom-header .mat-expansion-panel-header-title,
.custom-header .mat-expansion-panel-header-description {
flex-basis: 0;
}
.custom-header .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
I have used material icons. You can place your custom icons if you want. Here is a link to stackblitz demo.
extended the answer from #Faisal and as per the latest version of angular material, we will use mat prefix instead of md for the Material components.
Angular Material 8.1.4
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
<mat-expansion-panel-header>
<mat-panel-title class="font-weight-bold font-small">
Info
</mat-panel-title>
<mat-panel-description>
<mat-icon *ngIf="!xyz.expanded">play_arrow</mat-icon>
<mat-icon *ngIf="xyz.expanded">arrow_drop_down</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
Stackblitz Demo
Another pretty solution .. just add a span with fxFlex
<mat-panel-description>
<span fxFlex></span>
<img src="">
</mat-panel-description>
Don't forget to add hideToggle to the mat-expansion-panel
<mat-expansion-panel hideToggle>
I have one angular component with the html as following:
<!-- dynamic content generated runtime -->
<div class="test">
<div class="testinside">
HELLO
</div>
</div>
Now I want to style for one class in the part of [dynamic content generated], so my scss as following:
:host {
display: inline-block;
vertical-align: middle;
> .test > .testinside {
color: red;
}
> select {
display: inline;
}
> .combobox-container > .input-group {
color: red;
}
}
[.combobox-container > .input-group] is the css setting for the dynamic content.
However, it seems that the css for dynamic content is not effected :( (the css for static content is OK)
The dynamic content is as following:
<common-combobox _ngcontent-hdj-67="" ...>
<!-- dynamic content generated runtime -->
<div class="combobox-container combobox-selected">
<input type="hidden" name="" value="2">
<div class="input-group">
<input type="text" autocomplete="off" placeholder="Anrede" class="combobox">
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span>
</div>
</div>
<div _ngcontent-hdj-35="" class="test">
<div _ngcontent-hdj-35="" class="testinside">
HELLO
</div>
</div>
</common-combobox>
Can anyone help me to show the points I missed?
Use :host /deep/ to force child component use style
https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-
Here is Live example from Angular, see hero-detail.component.css
Update from #Joseph Briggs
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
In short, ::ng-deep will replace :host /deep/until next notification from Angular.
Set the viewEncapsulation for that component to None.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.