I have styled a placeholder like this:
It shows like this on click:
But i want it like this:
#input-id {
border: none;
border-bottom: 2px black solid;
}
#input-id:checked {
border: none;
border-bottom: 2px black solid;
}
<input id="input-id">
Try to pu outline: none; on focus :
input {
border:none;
border-bottom: 2px black solid;
}
input:focus{
border:none;
border-bottom: 2px black solid;
outline: none;
}
<input type="text" />
For more information about :focus selector and outline property, see the following documentations: :focus selector and outline property.
You can remove this by using
#input_id:focus {
outline: none;
}
Related
I want the input:valid effect to trigger at the outer div just as the
focus-within does. Is there any way?
.inputBox {
border-bottom: 1px solid #000;
transition: .3s;
}
input {
width: 80%;
border: none;
outline: none;
background: transparent;
}
.inputBox:focus-within,
input:valid {
border-bottom: 1px solid #fff;
}
<div class="inputBox">
<input type="email" id="email" required placeholder="E-mail" />
</div>
Try to use input without period in front of it. Because input is a tag and not the class unlike .inputBox
.inputBox {
border-bottom: 1px solid #000;
transition: .3s;
}
input {
width: 80%;
border: none;
outline: none;
background: transparent;
}
.inputBox:focus-within,
input:valid {
border-bottom: 1px solid #fff;
}
:has (which is yet to be implemented in browsers):
The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
.inputBox:has(> input:valid)
I know this is unhelpful to you now, but might be to others in the future.
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 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;
}
}
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}