I have the following code:
<div class="input-group want-outline">
<input class="form-control no-outline #(IsValid ? "" : "is-invalid")"
type="text"......
and this is my scss:
.no-outline:focus {
box-shadow: none;
&.want-outline {
border-radius: 2.5rem;
border-color: #80bdff;
border-width: 0.2rem;
}
}
when the input receives focus, it correctly sets box-shadow to none, but doesn't apply the border details to the parent. ive also tried:
& { border-radius.....
and
> & { border-radius.....
to reference the parent, these dont work either.
You can set the border on the focus-within style property which will apply styles to the parent element when the focus is within it (ie - when the input within it has focus.. The following uses straight css but can easily be converted to scss.
Note that IE does not support this style property at all (https://caniuse.com/?search=focus-within) but really who cares about ie? :)
Also - your border problem might be because you are not setting the border type (eg " solid / dashed / dotted) - i tend to set all the border styles in the shorthand version most of the time.
.no-outline:focus {
box-shadow: none;
}
.want-outline {
padding: 16px;
border-radius: 2.5rem;
display: inline-block;
border: solid 0.2rem transparent;
}
.want-outline:focus-within {
border-color: #80bdff;
}
<div class="input-group want-outline">
<input class="form-control no-outline" type="text" placeholde="enter txt"/>
<div>
Related
I get the below black borders in my input fields. How do I remove the ugly 1px border around the controls?
I can't find it in the CSS or don't know how to look for it as I'm new to it.
Code:
<ion-col col-8>
<input formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
Result ugly 1px borders around inputs:
Clean Inputs & textarea:
textarea, input
{
background:none;
outline: none;
-webkit-appearance: none;
box-shadow: none !important;
border: none;
}
Simple Way
input{
border: none; // for black border
outline: none; // for focus outline remove
}
You can add a style attribute to your input and set the border to none
<ion-col col-8>
<input style="border:none;" formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
If you have more than one input tag in your html-file I would prefer to use an external CSS-file and write the following lines to disable the borders for all inputs!
input {
border: none;
}
To remove borders from <input>, just set border property to none.
input {
border: none;
}
<input type="text" placeholder="Card number">
For more info, refer MDN documentation on border property.
If you want to keep the bottom border, and add some padding and margin, see below example.
input {
height: 2rem;
margin: 0rem 1rem;
padding: 0rem 1rem;
border-width: 0px;
border-bottom: 1px solid #e4e9f0;
}
input:focus {
outline: none;
}
<input type="text" placeholder="Card number">
I need to change color of label when textarea receiving some value.
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
When we focusing textarea it works fine with this code:
textarea:focus ~ label{
color: #55c57a;
}
But, I need this color: color: #ff8086; when we don't have any values, and green one(as on image above) when anything written on textarea.
I've tried :active , but it works only when Mouse clicked:
textarea:active ~ label{
color: #ff8086;
}
Maybe someone has a solution for this?
PS: I do have a solution for this with JS , but I'm curious if there is any solution with SASS as well?
You can use the css valid property, it will match if the textarea is a valid field you can set the required attribute and it will match the valid selector if valid...
https://www.w3schools.com/cssref/sel_valid.asp
textarea:valid + label{
background: #ff0000;
}
<textarea required="required"></textarea><label>label</label>
You can also try like this, this will work fine as above:
textarea:not(:invalid) + label{
background: #ff0000;
}
One further option, that avoids making the <textarea>, and other form elements, required is to use the :placeholder-shown pseudo-class; this does, of course, require that a placeholder attribute be set (although it can be set to a whitespace, or zero-length, string):
/* selects a <label> element immediately adjacent to
an element which has its placeholder string visible
to the user: */
:placeholder-shown+label {
color: #f90;
}
/* this selects all <label> elements, but is less specific
than the selector above; so will be 'overridden' in the
event that the previous selector matches: */
label {
color: limegreen;
font-size: 1.5em;
}
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
}
.form-reverse {
display: flex;
flex-direction: column-reverse;
width: 80vw;
margin: 0 auto;
}
textarea {
width: 100%;
min-height: 30vh;
}
:placeholder-shown+label {
color: #f90;
}
label {
color: limegreen;
font-size: 1.5em;
}
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" placeholder=" "></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
JS Fiddle demo.
References:
:placeholder-shown (Selectors Level 4 spec).
I want to change the styling for antdesign Input component and I am not sure how to make it work.
Now, I have been able to change the style on validation success and the border color changes to green on hover.
but still, when I click in the field to type, it still shows blue border.
Now, why is that happening?
How do I override the antdesign styles?
<FormItem hasFeedback validateStatus={this.state.passwordErr} help={passwordHelp} label="Password" >
<Input className={validClass} type="password" name="password" value={this.state.password} onChange={this.handlePassword} />
</FormItem>
this is a small relevant portion.
this css works for the hover
.success:hover{
border:1px solid green;
box-shadow: 0 0 2px green;
}
but this doesnt work when I do it without hover
.success:hover{
border:1px solid green;
box-shadow: 0 0 2px green;
}
I have noticed that this is the portion that is blocking my css
.ant-input:focus {
border-color: #5070f2;
outline: 0;
-webkit-box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
}
So, how do I override this css and force it to use mine?
here's the image of the effect
i want to change the blue to green.
and here's the code in inspect
You overwrite only the styles on :hover, you say that you found that .ant-input:focus { is overwriting your styles.
Why don't you write styles for the :focus event then ?
.success:focus {
border:2px solid red;
}
<input type="text" class="success">
If this doesn't work, write a more specific path like input.success:focus or form input.success:focus
But i guess ( since it's about focus on input elements ) that the problem is with the outline which appears on focus
You can either change the outline color/width etc. or hide it with outline:none and use your border style
input.success:focus { /*or a more specific selector*/
outline-color: red;
}
<input type="text" class="success">
input.success:focus { /*or a more specific selector*/
outline:none;
border:3px solid red;
}
<input type="text" class="success">
I came to the same problem and my solution works well for Antd version4.
<Input suffix={<Component />}/>
css:
.ant-input-affix-wrapper {
border: ....;
}
.ant-input-affix-wrapper-focused {
border: ...;
box-shadow: ...;
}
I use "antd": "^4.24.2", and here is what worked for me.
Add the following👇🏽 to your global css, and import the global css into your root folder.
.ant-input-affix-wrapper.ant-input-password {
border: none;
}
.ant-input-affix-wrapper-focused {
box-shadow: none !important;
}
I have a big problem with css transitions and angular 4.
Actually, I use an external library which provides an input counter (that's my library, so I know no more style is applied to the wrapped input), but on the application I have the following style for the inputs:
input {
&[type="text"],
&[type="password"],
&[type="email"] {
border-radius: 4px;
border: 1px solid $grey-color;
padding: 0.5rem 1rem;
outline: none;
width: 100%;
transition-property: all;
transition-duration: 300ms;
font-size: inherit;
}
}
And in the html template:
<input-counter
type="text"
placeholder="Name"
[maxlength]="nameMaxLength"
[(ngModel)]="name">
</input-counter>
<input-counter> component template:
<style>
.input-counter-group {
display: block;
position: relative;
}
.input-counter-group span {
color: #b0b0b0;
font-size: 10px;
}
.input-counter-group .text-input-counter {
position: absolute;
line-height: 10px;
right: 0;
bottom: -13px;
}
</style>
<div class="input-counter-group">
<input
[id]="id"
[type]="type"
[ngClass]="className"
[name]="name"
[placeholder]="placeholder"
[maxlength]="maxlength"
[disabled]="disabled"
[pattern]="pattern"
[required]="required"
[readonly]="readonly"
[(ngModel)]="value"
(focus)="onFocus()"
(blur)="onBlur()">
<span *ngIf="enabled" class="text-input-counter">
<span *ngIf="displayMinLength()">{{ minlength }} characters at least required: </span>{{ counter }}<span *ngIf="displayMaxLength()">/{{ maxlength }}</span>
</span>
</div>
The problem is when component is loaded, a css transition is applied to the input, like if the input was "initialized" to the css properties I defined for inputs:
This animation appears when the component <input-counter> is displayed, whereas the only animation which should happens is the border color changes when the input is hovered.
Thanks!
EDIT: the origin of the problem was the plugin codemirror which was loaded with ngIf, and applied under the hood a style to my input (itself loaded from another component!), but with css transitions it did the rendering above, so I display it with [hidden] and all is ok.
You can use angular's animation system to get what you are looking for.
Create an animation trigger for your input-counter component, attach it to whichever tag you need to animate in your template and change the trigger's state when you need the transition to happen.
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>