I try to find a solution for a few hours now but I do not know how to do this. It is maybe a simple thing and I hope someone can help me out.
I created three boxes. Those boxes have a border at the top and change their background colours as soon as you scroll over with your mouse.
Screenshot without hover effect: http://i.imgur.com/TWSvdUt.png
Screenshot with hover effect: http://i.imgur.com/NdELr4T.png
My problem is now, that I also need the colour of the title and the text in another colour (#ffffff)! I do not know how I have to change my .css!
Here is what I did:
.frontpage-box {
position: relative !important;
border-top: 8px solid #233c5b !important;
background: #eeeff1 !important;
height: 280px !important;
}
.frontpage-box:hover {
cursor: pointer;
position: relative !important;
border-top: 8px solid #daaf36 !important;
background: #233c5b !important;
color: #ffffff !important;
}
Can you tell me what is wrong? How do I have to change the code, so that the font color will be "white" after hover.
Thanks in advance,
Chris
Without seeing your full code you would want to do
.frontpage-box:hover p { color: #fff }
and not set it in .frontpage-box:hover with the important.
Related
I was writing CSS battle https://cssbattle.dev/play/9,
here is my solution: https://codepen.io/tinac/pen/oNMKZZr
But I found that the output is 98.6% match instead of 100%. The reason seems is there is a 1px border with background color #4CAAB3 outside my square:
#s2 {
background: #4CAAB3;
border: 50px solid #222730;
transform: rotate(45deg);
}
Why there is 1px border with background color outside of my 50px border?
I checked the box-model in dev tool, it looks fine. Please help, thanks in advance.
It seems to be a side-effect of
transform: rotate(45deg). Try using backface-visibility: hidden;
Use css important
background:#4CAAB3 !important;
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 saved the image as a transparent png but nothing I can do seems to fix it!?! Any ideas???
It should look like this:
Here is a copy of the image in GIMP showing that it's indeed transparent:
finally, Some good old code:
The Markup:
<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>
Search Box CSS:
.search, .search:active, .search:focus, .search:visited {
position: absolute;
color: #fff;
top: 3px;
width: 368px;
right: 9%;
font-size: 28px;
z-index: 3;
border-radius: 20px;
/* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
text-indent: 10px;
text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
background-color: #00D4C7;
}
The Search icon css itself:
Pseudo ::before element
.search:before {
content: "";
position: absolute;
top: 7px;
left: 268px;
background-image: url("images/icon-search.png");
background-color: rgb(0, 185, 171);
width: 46px;
height: 30px;
z-index: 4;
}
Note: If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?
Edit 1: If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue. I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this. I resorted to a css hack that changed the brightness to a closer match [with a faint outline still 😞 ]
Edit 2: Show me the JS Fiddle!
you did give your image a background-color: rgb(0, 185, 171); what is #00b9ab
and the searchbox background-color: #00D4C7; what is rgb(0, 212, 199)
My image itself was not truly transparent. There is is a small opacity channel that causes that grey haze to appear on a non-white background. I caught wind of this when posting to imgur....and confirmed it for sure when I actually made a copy of the layer (in photoshop) using select by color.
Solution: Check your images...to do this, load it onto a window by itself and set the html body to a non-white color. Wish I thought to do this before submitting this:
This might be happening because your background image size is different than its container's, .search::before, size. And/or because your .search::before background-color is a different hex value.
Try this:
Add background-color: transparent; and background-size: 46px 30px; to .search::before. This will make it so that if your background image is smaller than the container, the rest of the space will be transparent and set the background image size to be the same as its container, which you have explicitly set.
I found that the images that I was getting from the internet were not truly transparent. This website enabled me to get it to work. https://www.remove.bg/ (the image I used had the checkered background to indicate it was transparent, it just didn't work in the img tag until I used that website.)
Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.
Here are before-and-after images of what the fields would look like when autofill is used.
And here's a JSFiddle for anyone that would like to play around with it.
If helpful, here is the relevant code being used to modify the fields:
.field {
background-color: #202020;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 0 5px #000;
color: #d8d8d8;
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.
After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?
Thank you for any insight or help you can provide.
Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:
transition: background-color 2147483647s;
Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.
It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).
Hope this helps somebody! Cheers.
I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
Also modified the box-shadow to match original design:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;
Is there a way to get rid of them entirely and maintain the field's original style?
Here is the css
body {
background-color: #282828;
}
.field {
background-color: #202020;
border: 1px solid #000;
color: #d8d8d8;
margin: 100px; /* adding space around it to */
padding: 5px; /* make it easier to see */
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
DEMO
add transition to background-color with high animation time to the .field element
.field {
...
transition: background-color 5000s;
}
solutuion found here
demo on codepen
I fixed the problem by adding this to my css:
#media (prefers-color-scheme: dark) {
[data-theme*=dark] {
color-scheme: dark;
}
}
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"/>