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;
}
Related
I had some ComboBox and DateEdit fields with very nice box-shadows
Since updating DevExpress to 21.2.5, though, the box-shadows for the buttons have disappeared
I looked at the button through Chrome Dev Tools, went to Styles, and filtered for "shadow." I found
.shadow-none {
box-shadow: none !important;
}
in the file _shadows.scss line 6. Sure enough, unchecking it gave me the desired result. I clicked the link and was redirected to the file in Sources. It read
// stylelint-disable declaration-no-important
.shadow-sm { box-shadow: $box-shadow-sm !important; }
.shadow { box-shadow: $box-shadow !important; }
.shadow-lg { box-shadow: $box-shadow-lg !important; }
.shadow-none { box-shadow: none !important; }
I've searched high and low for _shadows.scss, and regardless, editing it might cause undesirable results elsewhere. I tried my own CSS and even used !important, but none of the following code worked
Overriding .shadow-none
.shadow-none{
box-shadow: inset -10px -10px black !important;
}
Editing my own rule
.cmbStatus .btn {
box-shadow: inset 0px 2px $combobox_shadow_dark, inset -2px -2px
$combobox_shadow_light !important;
}
I'm not sure what I should try next. Does anyone have any ideas?
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 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.
Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using #media css for achived this but, I don't know how to restore the defaults values.
#media screen and (min-width: 768px) and (max-width: 1024px) { }
/*Scroll bar nav*/
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
background:#FFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(204,204,204,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(204,204,204,0.4);
}
UPDATE 2022
I answered this almost 10 years ago and seems like after 2021 this solution stop working, read the solution from #Volomike, it might get you where you want to.
I just realized you can set all the properties in auto; and will do the trick. This is a self answer but I guess someday someone can have the same question.
/*Scroll bar nav*/
::-webkit-scrollbar {
width: auto;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: auto;
-webkit-border-radius: auto;
border-radius: auto;
background:auto;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius:auto;
border-radius:auto;
background:auto;
-webkit-box-shadow:auto;
}
::-webkit-scrollbar-thumb:window-inactive {
background: auto;
}
I don't know if exist another method.
-- UPDATE --
Look like you can also use the initial and unset value
//reverting all the values
::-webkit-scrollbar {
all:unset;
}
or apply to an specific one {width : unset} || {width : initial}
NOTE: Using unset will not work on IE11
Use the initial value or unset value for the properties you want to revert (depending on how exactly you want to revert them).
Both these values can be applied to all CSS properties.
example
::-webkit-scrollbar {
width: initial;
}
or
::-webkit-scrollbar {
width: unset;
}
If you want to revert all properties of a rule then you should use the all keyword
example
::-webkit-scrollbar-thumb {
all:unset;
}
Notice: No IE support for any of these as of yet.
Varying levels of support for each browser (see the linked docs for details)
I had trouble with this. I don't know what exactly triggers the latest Chrome to switch scrollbars on a desktop browser to overlay mode, but it was unnerving to me because it makes the page scroller look broken to an inexperienced user. The selected answer didn't seem to work in my version of Chrome on Lubuntu Linux 20.04.1, version 100.0.4896.127. So, over several hours, I painstakingly recreated the settings to Chrome's system defaults and yet something that works in both light and dark mode too. Note I'm only styling the BODY element's vertical scroller in this example, but you can adapt easily for horizontal scrollers as well as not just apply it to the BODY element.
BODY::-webkit-scrollbar
{
all:unset;
}
BODY::-webkit-scrollbar-button
{
display:block;
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
height: auto;
width: initial;
background-position: center 5px;
background-size:9px 7px;
image-rendering: pixelated;
background-repeat:no-repeat;
}
BODY::-webkit-scrollbar-button:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-button:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-button:vertical:start:increment,
BODY::-webkit-scrollbar-button:vertical:end:decrement
{
display:none;
}
BODY::-webkit-scrollbar-button:vertical:decrement
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}
BODY::-webkit-scrollbar-button:vertical:increment
{
background-position: center 6px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}
BODY::-webkit-scrollbar-thumb
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
border-left:2px solid rgba(255,255,255,0.3);
border-right:2px solid rgba(255,255,255,0.3);
}
BODY::-webkit-scrollbar-thumb:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-thumb:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-track
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}
Extra Notes:
Using the ButtonFace and ButtonText colors, you can have the scrollbar react to light and dark mode. However, that doesn't give you the varying levels of light and dark you need on the control. You'd think perhaps you could use a filter:brightness(x); level or an opacity:x level to create your varying levels of light and dark on the control -- but those oddly don't work on these scrollbars. Instead, I found that that an inset box-shadow set on wide spread, and nothing else, with rgba colors, worked well.
I found that setting width:initial, plus height:auto, on the button alone was enough to set the width of the scrollbar control parts.
I got the triangle SVGs from here. Note that I changed the fill on those to ButtonText in order to make it work in browser dark and light modes.
Note that I used rgba(128,128,128,x) in some cases because starting from white or black with opacity created odd issues when switching light and dark modes, and so I chose the middle value with opacity to get around that.
The image-rendering:pixelated was very useful because otherwise the very tiny up and down triangle SVG icon would be antialiased so much that it would look too opaque. This allowed the SVG icon to maintain its darkness on light mode, and brightness on dark mode.
I filed this issue with the Chromium browser team to see if they can give us some reliable CSS to turn off overlay scrollbars on a given element, should we need that.
https://bugs.chromium.org/p/chromium/issues/detail?id=1333947
EDIT: Recently, I found that web server cache has something to do with the Google Chrome/Chromium/Edge Chromium browsers from somewhere around version 100+ at least here around 6/17/2022. When I turn on web server cache, any sub-page on a website going back to a previous page (as a regular relative link, not as a history.back(); call), will consistently show an overlay scrollbar instead of a fixed scrollbar. But if I force the page with an .htaccess rule that is a website cache buster, then the problem goes away and I see a scrollbar like normal.
As commenter vsync mentioned, once you've hid the scrollbar, if you add a new css rule to show the scrollbar, it doesn't work as expected.
Can be solved with JS
let styles = document.getElementsByTagName('style');
for(let i = 0; i < styles.length; i++) {
let style = styles[i];
let rules = style.sheet.cssRules;
for(let r = 0; r < rules.length; r++) {
let rule = rules[r];
if(rule.selectorText === '::-webkit-scrollbar') {
style.sheet.deleteRule(r);
}
}
}