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"/>
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.
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;
}
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 am writing an application using html,css and javascript. i have set border radius of button to have rounded corner but which is not working in opera browser. but same i have tested in chrome it works. please do give some suggestion or help on this. here is demo
Rounded Corner or all browser you want to use folloing method
#divId{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
}
Its work for me perfectly.
Unfortunately the Border-radius css style is not fully cross-browser supported. Opera is one browser that does not offer support.
See: http://www.westciv.com/iphonetests/
First, did you try -o-border-radius? Second did you try on a plain div? Sometimes form elements reject certain styles. Otherwise it isn't support (opera10 didn't have it).
Border radius in Opera with other demos related to Opera.
button {
background:#000;
color:#fff;
border-radius: 15px;
}
In Opera you can use this:
.className {
-o-border-radius: 3px;
}
I ran into the same problem and found out that although border-radius is supported in Opera, it doesn't quite work with buttons.
But I managed to make it work, and achieved almost the same results. Here's my solution.
Just recreate behavior of the button with following style:
button {
background-color: #ccc;
border-style: outset;
border-color: #eee;
border-radius: 6px;
}
button:hover, button:active, button:focus {
background-color: #ddd;
}
button:active { border-style: inset; }
The thing is, that border-radius works, when you change border-style property. The behavior of Firefox, for example, when you just use border-radius, looks like it's using border-style: outset for normal behavior of button, and border-style: inset, when the button is clicked.
There are only 2 extra lines to make it work in Opera almost the same way as in other browsers.