I'm trying to save and copy a website trough chrome.
Everything works correctly except for the fact that I can't replicate the Yellow color of the login textboxes.
They are yellow before you click them and write something. Once you start writing, they become white.
As you can see, there's this portion of code that I don't know where to add. I've been struggling for the past 2 hours to solve this, and any help would be very much appreciated.
Thank you!
Here's the Immage
You don't have to style anything. It's Chrome that add this color if you autofill the input. If you still wanna override the default style, use this selector:
input:-webkit-autofill {
background-color: yellow;
}
Keep in mind that this only apply in webkit browser(Chrome and Safari). You can read more with this link:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill
Related
I have a toolbar of buttons that are gray by default but when one button is clicked on that button is made white to indicate that that is the page you are on. This is achieved using a class and the below css.
.btn-details:focus {
color: #fff;
}
This works fine except when I change windows and then go back. For example, if I have my page open it is working find, then I switch to an Excel window and then back to my page the white highlighting is now gone. How can I keep the button in focus even when the window is changed?
Unfortunately I think you need to take your time to focus on how CSS works.
You are using the: focus selector. Know that it does what you asked it to. If the button loses focus and your style no longer holds.
I think this is exactly what happens when you use other apps.
I advise you to add a CSS class on the button clicked and to remove this same class on the other buttons.
If you have difficulty implementing this, please come back to me. I would make a small example depending on your level.
See you soon !
I have no idea how this issue started, but I noticed that in my Rails app all <select> inputs render differently in Safari and cause a page refresh when you try to click it.
The problem occurs anytime you add styling to the input that changes background, border, or anything that Safari doesn't really like. A common bootstrap convention adds class='form-control to inputs, and this seems to be causing my problem.
This is the input without any border:
This is the same input with the addition style='border: 2px solid red:
As you can see the background changes and when you click the input, the page refreshes, losing all data in the form, making the form impossible to complete. I think it might have something to do with webkit?
It's worth noting that the refresh does not hit my server and Safari actually displays this message (with no other detail):
If anyone has any idea why this might be happening / how to fix it, please let me know
I have an input type date on a web form. When a user prints the form, the clear button (the gray circle w/ an "x" in it) prints next to the date. Obviously this isn't ideal. I have played around w/ a few moz kits but I cant make that clear button invisible on print, no matter what I have tried thus far. Also, the form is being used exclusively in Firefox. Any advice on making this work would be greatly appreciated!
I have tried using this in a css document under #media print {}
input[type=date]::-ms-clear {
display: none;
}
I have tried the same thing with:
::-webkit-search-cancel-button
neither has any effect.
It is not possible to remove the clear button in FireFox. The ::ms-clear feature is only for Microsoft browsers, as described in the MDN documentation.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear
You need to design your own date picker from scratch or use one from a library.
Helo guy how are you?
I'm a younger developer that I be improve my knowledges, then right now I was travel over the internet when I finded a website very cool https://www.jinx.com With this i will try to develop something menu equal that website, but unfortunately it was in vain :(
I'm still learn a lot of HTMl, CSS, JQ and whaterever web lenguages... Could somene help me to create a menu bar like this?
Greatful now!
Use inspect in chrome(F12).You can see the css in the right corner.Make use of it.
You can follow the google devTools for Live-edit ,changes will be reflected in UI. Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).
To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.
Follows this: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Hope it helps.!
I am trying to style the scrolling picker (just what's the correct word for this would help) for a website on iOS Safari. I know that this is possible because they do it on the geico.com form (second page of this form: https://sales2.geico.com/) - but I can't figure out how they did it!
Here's a picture of the request:
Anyone have experience with this?
I did use https://mobiscroll.com/ in a previous project to achieve this, also available from https://github.com/acidb/mobiscroll if you like to fiddle around a bit by yourself.