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;
}
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 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
I am having some problem with a button styling. CSS works perfectly on chrome but not on safari / safari: https://prnt.sc/ku3bhl, chrome: https://prnt.sc/ku3wjj /
Here is the code I am using / I am basically overwriting some of it's styles that it get's from it's plugin:
.popover-markup2215 button {
background: #fff !important;
border-radius: 0px !important;
border-color: #111 !important;
padding: 12px !important;
margin-bottom: -177px !important;
margin-left: 119px !important;
}
example link: https://graveren.mmcreaties.nl/product/iphone-7-telefoonhoesje-ontwerpen-zwart/
Add this CSS.
you need to use -webkit-appearance
.single_add_to_cart_button {
font-weight: 500 !important;
text-transform: lowercase;
border: 2px solid #796eff !important;
box-shadow: 7px 7px 0 rgba(79, 84, 124, 0.4) !important;
background: #796eff !important;
background-image: none !important;
width: 40%;
border-radius: 50px;
-webkit-appearance: none;
}
As I can see from the dev tools the class name is: .popover-markup2214 and not 2215, or if the class is changing dynamically try to get it like this .cart .trigger.btn
I would like to increase the size (width) of the text input fields in my grails application.
I searched main.css and found a textarea entry, where I successfully increased textarea size.
Is there an equivalent for input text fields ? Or How to increase them ?
peter
Dortmund Germany
Try something like this:
This is a fancy search field where when you click the input text field it expands...
gsp
<div class="form-controller" id="s2">
<g:remoteField placeholder="${message(code: 'search.navbar.placeholder', default: 'Search ...')}" name="q" class="form-control" update="searchPanel" paramName="q" url="[controller:'environments', action:'search']"></g:remoteField>
</div>
css
#s2 {
display: inline-block;
*zoom: 1;
*display: inline;
}
#s2 input {
background: url(../images/search/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
/* width: 150px;*/
margin-left: 1em;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.7s ease 0s;
}
#s2 input:focus {
width: 200px;
background: url(../images/search/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
}
Try this in main.css:
input[type=text] {
width: 600px;
}
It worked for me.
http://jsfiddle.net/g54p4/
HTML and CSS is in jsfiddle in case if you need to see.
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
CSS
.box-input{
border-left: 7px solid transparent;
cursor: pointer;
display: block;
vertical-align: middle;
width: 100%;
}
.box-input:hover,
.box-input:focus{
border-left: 7px solid green;
}
.box-input input{
width: 100%;
border: 0;
padding-left: 80px;
}
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
}
.input-icon-email{
display: inline-block;
position: relative;
vertical-align: middle;
height: 34px;
width: 34px;
background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
padding-left: 30px;
}
Tried fake input div so that it would display border-left green but realized when go to next field by entering tab, it won't show border-left green. other problem is if try to add border-left green in input css, it will display when focus, and image icon will be jumpy. Also wanted to push the icon away with padding left but nothing happened.
Perhaps might be doing it wrong.
Help appreciated.
You can try this:
working DEMO
add this:
.box-input input{ border-left: 7px solid transparent;}
and return the hover style to the input:
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
border-left: 7px solid green;
}
You can as well use box-shadow : DEMO outset - DEMO inset
input:focus {
box-shadow: -7px 0 0 0 green;
}
or even
input:focus {
box-shadow: inset 7px 0 0 0 green;
}
This will be added to any borders already here and remains as long as input has focus. ouset box-shadow may change outline renderer from browser to browser , inset should not and inset will drawn hover background if any.