I have an input field with border-radius and when it's in focus the outline appears but it has rectangular property. I'm using Chrome. Is this a bug? I don't want to remove outline I just want it to respect border-radius.
No unfortunately it is not possible to keep an outline that is respecting the border-radius in all browsers.
Instead it would be much easier to remove the outline with outline: 0; and adding a custom border or box-shadow with CSS on focus.
Example:
input[type="text"] {
outline: none;
}
input[type="text"]:focus {
box-shadow: 0 0 3px blue;
}
(http://jsfiddle.net/3cggR/)
input[type=text]:focus{
box-shadow: 0px 0px 2px 1px orange;
outline:none;
}
Related
I made sample with two number inputs with custom outline and box-shadow.
In Google Chrome I see strange black-gray border after focus on bottom input element.
For this input I use
.shadowBox:focus {
outline: 1px black dotted !important;
box-shadow: 1px 1px grey;
}
If I set box-shadow: none this strange border doesn`t appear. What I do wrong?
EDITED. Why this "strange border" appears on 'focus' if I use box-shadow? This border exists only in Google Chrome, but not in Mozilla Firefox.
If you want to have both, the dotted outline And border solid you can have this instead:
.shadowBox:focus {
outline: 1px dotted black;
border: 2px black solid;
}
I have a form with a submit button that I'm trying to change the color to. This should be very simple, but my css isn't working and I can't figure out why.
The CSS:
input[type="submit"]{color: red;}
Fiddle:
https://jsfiddle.net/zn7xrv60/
This is driving me nuts, any help would be appreciated.
The problem is in your input text shadow, try changing it like below then make changes what you want it to be.
From
input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
To
input{
color: #f08200;
text-shadow: 0px 0px 0px red;
-webkit-text-fill-color: transparent;
}
.login_content .container input[type="submit"] {
background: red;
}
If you examine that input, you'll see it's taking its color from the following code block, which has more specific selectors:
.login_content .container input[type="submit"]{
width: auto;
padding: 10px 50px;
border-radius: 25px;
background: #e8e8e8;
color: #c5c5c5;
text-transform: uppercase;
border: none;
cursor: pointer;
}
Also, this rule on the input tag, says the text color should be transparent:
-webkit-text-fill-color: transparent;
Here's your jsFiddle with red text.
Use your browser's dev tools to for this type of debugging.
since your login button is disabled at the time you need to do something like this.
.login_content .container .submit input:disabled {
//css
}
It seems there are two issues.
The first is what Tieson T mentioned in his comment. Which is that your selector is being over written by a more specific selector. This can be "fixed" by using "!important" which isn't a preferred, but is an easy way around an issue like this.
The other issue is that the submit button requires you to set the text-shadow. Try this out:
input[type="submit"]
{
color: red !important;
text-shadow: 0px 0px 0px red !important;
}
This CSS rule is what is causing you to have to override the text-shadow:
input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
So another option is to remove the text shadow property from this rule, and then you won't need it specified in the first rule.
UPDATE
As Chava G, pointed out in the comments another reason the color is not showing is because -webkit-text-fill-color is set to transparent.
Additionally, since the text shadow has no vertical or horizontal offset the shadow wouldn't be visible if the -webkit-text-fill-color was not transparent.
The input css rule above is a little "confused", it sets the "color" property which might imply you want the text a certain color, but then applies a text shadow that would be hidden behind the text. Followed by that it makes the text itself transparent, so it's no longer hiding the shadow which is a different color than what was set for the "color" property.
So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1 but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.
It happens on chrome, ie, and Firefox, can't test any others.
border-style:solid; will override the inset style. Which is what you asked.
border:none will remove the border all together.
border-width:1px will set it up to be kind of like before the background change.
border:1px solid #cccccc is more specific and applies all three, width, style and color.
Example: https://jsbin.com/quleh/2/edit?html,output
This is the solution for mobile safari:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
as per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
and as suggested here: Remove textarea inner shadow on Mobile Safari (iPhone)
None of the solution are working currently.
Here is my solution. You can add prefixes.
box-shadow: inset 0px 0px 0px 0px red;
Add border: none or border: 0 to remove border at all, or border: 1px solid #ccc to make border thin and flat.
To remove ghost padding in Firefox, you can use ::-moz-focus-inner:
::-moz-focus-inner {
border: 0;
padding: 0;
}
See live demo.
Set border: 1px solid black to make all sides equals and remove any kind of custom border (other than solid).
Also, set box-shadow: none to remove any inset shadow applied to it.
Try this
outline: none;
live demo https://codepen.io/wenpingguo/pen/KQgbXq
All browsers, including Safari (+ mobile):
input[type=text] {
/* Remove */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Optional */
border: solid;
box-shadow: none;
/*etc.*/
}
I'm working on firefox. and I was having the same issue, input type text are auto defined something looks like boxshadow inset, but it's not.
the you want to change is border... just setting border:0; and you're done.
here is a small snippet that might be cool to try out:
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
note that: border-style removes the inner shadow.
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
<input type="text"/>
So I'm using
-webkit-border-radius: 10px;
for a text entry field right now, but the problem is that once the field is selected, there is a border without the border radius modified.
So my question is does anyone know how to modify this?
I don't know if you can set the outline to have a radius like the border but you can remove it with
outline:none;
Besides the outline you may also use
-webkit-appearance: none;
No webkit equivalent to -moz-outline-radius at the moment
While there's no (so far as I'm aware) cross-browser implementation of outline-radius, or even a vendor-prefixed implementation other than the -moz- variant, you could perhaps emulate it with an inset box-shadow:
.elementClass {
padding: 0.2em;
outline: none;
border: 1px solid #000; /* in Chromium 18/Ubuntu 11.04 setting
the border is required for the outline
to be applied, this may not be true elsewhere */
border-radius: 0.4em;
}
.elementClass:focus,
.elementClass:active {
box-shadow: inset 0 0 1px 2px #f90;
}
JS Fiddle demo.
I have a form with some inputs. What I want is that when user clicks on the text box it highlights with a color. To do this I'm using CSS3 and the CSS3 Generator in Chrome and Firefox 3.6.17. But I'm not getting results in any browser. Here's the code I'm using.
.user-input:focus {
-webkit-box-shadow: 0 0 5px #249663;
-moz-box-shadow: 0 0 5px #249663;
box-shadow: 0 0 5px #249663;
behavior: url(../css/pie.htc);
}
Any help?
Best Regards,
Tiago Castro
First add outline none to your :focus...
.user-input:focus {
outline: none;
}
You might need to force webkit to get rid of its default styles...
.user-input {
-webkit-appearance: none;
}