I have created a SCSS class section-readonly-input. This should not show borders. I now have the following problem, when I click on the input field a border is still shown. But this should not be. No border should be displayed.
My question is, how do I rewrite my SCSS so that no border is displayed when I click on it? I'm using the framework Bulma.
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="section-readonly-input"
type="text"
value="This text is readonly"
readonly
/>
<span className="icon is-small is-left">
<i className="fas fa-futbol"></i>
</span>
</p>
</div>
</div>
);
}
export default General;
General.scss
.section-readonly-input {
outline: none !important;
border-width: 0px !important;
border: none !important;
&:hover {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
&:focus {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
}
The default browser agent stylesheet has the following for the input element when clicking on it.
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
We have to override this by setting
.section-readonly-input {
border: none;
&:focus-visible{
outline: none;
}
}
This will fix your problem
.section-readonly-input {
border: none;
}
.section-readonly-input:focus-visible{
outline: none;
}
<input class="section-readonly-input" type="text" value="This text is readonly" readonly />
input[type=text].section-readonly-input {
outline: none !important;
border-width: 0px !important;
border: none !important;
&:hover {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
&:focus {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
}
Try this.
Are you sure you should remove it? It is there for a reason.
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
Related
I want my <input type="file" /> button to look like all my other buttons.
Now, it's easy with all browsers thanks to :
::file-selector-button (Firefox)
::-webkit-file-upload-button
::-ms-browse
This is what this input looks like in ShadowDOM :
<input type="file">
<button tabindex="-1">
<label>No file selected</label>
</input>
So, the button is within the input box so everything that's outsize this box is cropped (box-shadow and outline).
Do you have an idea to avoid this crop ?
I mean, I can add padding to the input but I have to calculate the border-radius spread, outline offset, correct padding with negative margins, etc.
I'm looking for something more flexible.
EDIT : overflow:visible on the input is not working. I don't know why
EDIT 2 : This is the default styling from resource://gre-ressource/forms.css (Firefox)
input[type=file] {
white-space: nowrap !important;
overflow: hidden !important;
overflow-clip-box: padding-box;
color: unset;
/* Revert rules which apply on all inputs. */
appearance: none;
-moz-default-appearance: none;
cursor: default;
border: none;
background-color: transparent;
padding: unset;
}
This explains why overflow:visible doesn't work. Also, playing with overflow-clip-box doesn't changes anything. It is set in forms.css however specifications say this property is not implemented in Firefox. Plus, there is a bug associated
EDIT 3 : Defining overflow: visible !important seems to override user agent styling, and it cancels overflow-clip-box: padding-box; as well but the overflowing content is still not visible.
Any workaround idea ?
:root {
--base-color: purple;
--file-border: 2px solid var(--base-color);
--file-border-radius: 5px;
--file-background: gold;
--file-box-shadow: 2px 2px 3px 0 #888;
--file-outline: 2px dadshed blue;
}
::file-selector-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-webkit-file-upload-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-ms-browse {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
[type=file]:focus::file-selector-button{
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-webkit-file-upload-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-ms-browse {
outline: var(--file-outline);
outline-offset: 2px;
}
Cropped box-shadow and outline (on focus) :
<p>
<input type="file" />
</p>
With padding :
<p>
<input type="file" style="padding: 5px"/>
</p>
With padding + correction :
<p>
<input type="file" style="padding: 5px;margin-left:-5px;margin-top:-5px"/>
</p>
It's not possible in Chrome and Firefox.
That's because user agent stylesheets from the rendering engines of these browsers (Blink and Gecko) declare overflow: hidden !important; inside the selector input[type=file]. Unfortunately, they can't be overrided due to CSS cascading order.
The !important rule in UA stylesheets will bypass even a JS solution (I tried).
I mean, I can add padding to the input but I have to calculate the border-radius spread, outline offset, correct padding with negative margins, etc.
You don't have to do the calculations, just use padding-bottom directly instead of setting padding on all sides.
Edit: You can also make another custom variable to control the padding in one place. Since you have no issue setting the shadow as custom property as well. See the snippet below:
:root {
--base-color: purple;
--file-border: 2px solid var(--base-color);
--file-border-radius: 5px;
--file-background: gold;
--file-box-shadow: 2px 2px 3px 0 #888;
--file-outline: 2px dashed blue;
--file-padding: 0 0 5px 0;
}
::file-selector-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-webkit-file-upload-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-ms-browse {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
[type=file]:focus::file-selector-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-webkit-file-upload-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-ms-browse {
outline: var(--file-outline);
outline-offset: 2px;
}
input{
padding: var(--file-padding);
}
<p>
<input type="file" />
</p>
I am trying to remove borders from a mat-form-field when the field is disabled but I've tried all the options I could find online but nothing seems to removing the borders from the div
Here is my code:
<div *ngIf="readOnly" class="medium-2 columns read-only-true">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Employee ID</mat-label>
<input [disabled]="readOnly" class="emp_id" required [(ngModel)]="form.id" matInput name="empID" placeholder="EMP #">
</mat-form-field>
</div>
Here is what I have tried so far:
First approach:
.read-only-true .mat-form-field-outline-start {
border-color: white;
}
.read-only-true .mat-form-field-outline-gap {
border-color: white;
}
.read-only-true .mat-form-field-outline-end {
border-color: white;
}
Second Approach:
.read-only-true .mat-form-field-outline .mat-form-field-outline-start {
border: white !important;
}
.read-only-true .mat-form-field-outline .mat-form-field-outline-end {
border: white !important;
}
Third approach:
::ng-deep .read-only-true .mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-start {
border: 1px solid white !important;
}
::ng-deep .read-only-true .mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-end {
border: 1px solid white; !important
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
I would really appreciate some help with this and please let me know if you want me post any other information.
For CSS:
::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled, ::ng-deep .mat-form-field-outline {
opacity: 0;
}
HTML
<mat-form-field appearance="fill" class="full-width">
<mat-label>Employee ID</mat-label>
<input matInput type="text" value="value" [disabled]="true" class="emp_id">
</mat-form-field>
I am working on an Angular project using PrimeNG and I am going mat trying to correctly set the style for some invalid form field.
In the specific in my form I have field of this type:
<input id="commessa" class="p-invalid" aria-describedby="commessa-help" formControlName="commessa" type="text" pInputText required/>
with this CSS associated:
:host ::ng-deep {
.ng-invalid:not(form) {
border-left: 5px solid #a94442 !important; /* red */
border-color: #f44336 !important ;
}
}
it works fine: the invalid text fields of my form have the red border as I expected.
Then I have numeric field like this:
<p-inputNumber id="idOrdine" styleClass="test" formControlName="idOrdine"></p-inputNumber>
with this type of field I can't obtain red border for invalid field (for example if I have an empty p-inputNumber field that is requiered).
I have tried a lot of things but it is not working. The only thing that changed my border color was set this CSS rule:
.ui-inputtext {
border: 1px solid red;
}
but in this way it set all the input field with the red border.
What could be a solution to set the red border only on the invalid p-inputNumber fields?
**EDIT-1: Inspecting the DOM the rendered field is:
<div _ngcontent-ugn-c193=""
class="col-10">
<p-inputnumber _ngcontent-ugn-c193=""
id="idOrdine"
styleclass="test"
formcontrolname="idOrdine"
ng-reflect-style-class="test"
ng-reflect-name="idOrdine"
class="ng-untouched ng-invalid ng-dirty">
<input pinputtext=""
class="ui-inputnumber-input ui-inputtext ui-corner-all ui-state-default ui-widget"
aria-valuenow="null">
<span ng-reflect-ng-class="[object Object]"
class="ui-inputnumber ui-widget">
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</span>
</p-inputnumber>
</div>
The CSS related to the inner input pinputtext tag is:
body .ui-inputtext {
font-size: 14px;
color: #333333;
background: #ffffff;
padding: 0.429em;
border: 1px solid #a6a6a6;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
changing here (by Chrome tool) the border color it is changed...but I can do it only by Chrome dev tools...not via code...
in global style file add these style rule
.ui-inputtext.ng-dirty.ng-invalid , .ui-inputtext.ng-touched.ng-invalid{
border: 1px solid red !important;
background: rgba(255, 0, 0, 0.35);
box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;
}
updated ⭐
in case we use p-inputnumber component
p-inputnumber.ng-dirty.ng-invalid .ui-inputtext ,
p-inputnumber.ng-touched.ng-invalid .ui-inputtext {
border: 1px solid red !important;
background: rgba(255, 0, 0, 0.35);
box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;
}
the ng-touched not added even when you enter and leave it that seem an error from the component itself 🐱👤
demo 🚀🚀
This will work.
With SCSS
.ng-invalid {
.ui-inputtext {
border: 1px solid red;
}
}
With CSS
.ng-invalid .ui-inputtext {
border: 1px solid red;
}
With ng-deep
::ng-deep .ng-invalid .ui-inputtext {
border: 1px solid red;
}
or
::ng-deep .ng-invalid {
.ui-inputtext {
border: 1px solid red;
}
}
Sorry if this is a duplicate but I couldn't find an answer. I'm currently trying to both disable autoComplete and remove the default styling from chrome on :active, etc. I've tried various examples but come up with nothing.
<input
type="email"
name="email"
className={style['form-control']}
id="exampleInputEmail1"
aria-describedby="emailHelp"
required
onComplete="off"
onChange={(e) => this.onChange(e)}
></input>
.form-control {
background-color: $bg3 !important;
width: 100% !important;
color: #D7E5F0 !important;
font-size: 14px !important;
padding: 7px 15px !important;
border: none !important;
}
chrome:
https://gyazo.com/cb8354cecb39fc9d8f479b4d5ecca3f7
Found a fix for now with the following code:
.form-control,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
background-color: $bg3 !important;
color: #D7E5F0 !important;
outline: none;
border: none !important;
-webkit-text-fill-color: #D7E5F0 !important;
-webkit-box-shadow: 0 0 0 30px $bg3 inset !important;
}
In Opera when a text field is focused, the submit button gets an ugly black border.
You can see this in a screenshot.
In the bottom of the image the textarea is focused and submit button looks awful. How can I prevent this using CSS?
UPDATE: the CSS for the button is
.uiGreenButtonOuter {
border: 1px solid #234723;
cursor: pointer;
}
.uiGreenButtonInner {
margin: 0;
font-size: 11px;
display: block;
background: #3E7E3E;
padding: 4px 6px;
border-width: 1px;
border-style: solid;
border-color: #6AB76B #3A763B #3A763B;
color: white;
text-align: center;
text-shadow: 0 1px 0 #234723;
cursor: pointer;
}
.uiGreenButtonOuter:hover .uiGreenButtonInner {
text-decoration: none;
background: #4C9B4C;
}
.uiGreenButtonInner:focus{
outline: 0;
}
This will do the job:
input[type="submit"] {
border: 0;
}
if your html is set like this:
<form action="">
<textarea name="fos"></textarea>
<span class="uiGreenButtonOuter">
<input class="uiGreenButtonInner" type="submit" name="send" value="Nyedva" />
</span>
</form>
Here is demo
you can use :focus or :blur pseudo-classes to do the trick. We need the code to understand the exact problem.
eg.
textarea:focus {/* your css here */}