I'm encountering an issue with changing the color of a submit button in a form. It seems like a straightforward task, but for some reason, my CSS code is not having any effect and I can't figure out why.
Here is the CSS code I am using:
input[type="submit"]{color: red;}
If you'd like to take a look at my code, here's the Fiddle link: https://jsfiddle.net/zn7xrv60/
I've spent quite a bit of time on this without success, so any assistance would be greatly appreciated.
The issue lies within the input text shadow, consider modifying it as shown below and then adjust it to your desired specifications.
Original:
input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
Modified:
input{
color: #f08200;
text-shadow: 0px 0px 0px red;
-webkit-text-fill-color: transparent;
}
.login_content .container input[type="submit"] {
background: blue;
}
Upon closer examination of the input, it becomes apparent that its color is derived from the following code block with 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;
}
In addition, the rule applied to the input tag specifies that the text color should be transparent:
-webkit-text-fill-color: transparent;
Feel free to view your demonstration with red text on this jsFiddle link.
Your browser's developer tools can prove useful for troubleshooting issues like this.
When your login button is inactive, you can implement the following solution.
.login_content .container .submit input:disabled {
//custom CSS code here
}
There appear to be two issues that need addressing.
The first issue, as mentioned by Tieson T in the previous comment, is that your selector is being overridden by a more specific one. While using "!important" can temporarily resolve this problem, it is not generally recommended due to potential complications.
The second issue pertains to the submit button requiring the text-shadow property to be set. To rectify this, consider implementing the following code:
input[type="submit"]
{
color: red !important;
text-shadow: 0px 0px 0px red !important;
}
This particular CSS rule is the reason for the requirement of overriding the text shadow:
input{
color: #f08200;
text-shadow: 0px 0px 0px #000;
-webkit-text-fill-color: transparent;
}
An alternative solution would involve removing the text shadow property from the aforementioned rule, eliminating the necessity of specifying it in the initial rule.
Another aspect highlighted by Chava G in the comments is the possibility that the text color may not be visible due to the setting of -webkit-text-fill-color to transparent.
Furthermore, given that the text shadow lacks any horizontal or vertical offset, its visibility would be compromised if -webkit-text-fill-color were not transparent.
The input CSS rule outlined above appears somewhat contradictory; while it sets the "color" property suggesting a desire for colored text, it also applies a hidden text shadow of a different color. Subsequently, it renders the text itself transparent, allowing the incongruent shadow to remain visible.
Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...
In InfoPath 2010, I created a form and published it to a SharePoint 2010 list. The end user wants to print this form for their records, but when using the web part to print the screen, the page comes out very small and unusable. Is there any HTML code th ...
I am trying to modify my image within a bootstrap container to extend it to the side while keeping the rest of the layout unchanged. Here is what I currently have: https://i.sstatic.net/Mcukl.jpg. There is a gap on the right side of the image that I want t ...
I recently developed a basic range slider component for an application built with NextJS. This component utilizes an <input type="range"> element. While the range slider functions properly on Desktop and Android devices, I encountered sign ...
Currently undertaking the task of refining over 10,000 lines of CSS code. Instead of manually converting line by line, I aim to transform from this: -webkit-transition: .1s linear all; -moz-transition: .1s linear all; transition: .1s linear all ...
Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...
I've been working on creating a step bar that needs to adapt to any number of steps provided by the backend. Here's what I have so far: https://i.sstatic.net/cj4qZ.png It looks fine, but connecting the circles with bars would be beneficial. How ...
When using bootstrap 4 with an MVC application, I encountered compatibility issues on Internet Explorer 8 or 9. Even after adding html shiv and <meta http-equiv="X-UA-Compatible" content="IE=edge">, all elements appear jumbled. Is there a workaround ...
I am encountering an issue with my JavaScript and CSS code. It works perfectly fine within the fiddle environment but fails to function properly outside of it. Here is the link to the fiddle When I embed the code into an HTML document directly, it does n ...
Is there a way to access the data stored in an HTML5 file, specifically in the header section like this: <script type="application/json" src="data.json"> Many have recommended using $.get("data.json"), but that requires loading the data each time. ...
I'm having trouble getting this to work properly. I can't figure out what I'm doing wrong. I've set the snap start and parent container with snap type styling in my current project using react, gatsby, and scss. Here is my code: index. ...
Struggling with integrating new users into my personal project, particularly in passing input values (userName and userAge) to the parent element for addition to playersData. Here is a sample code snippet from the child component: `<template> <d ...
I attempted to publish the exact .html and .js codes on the internet and host them on my own server. I am aiming to duplicate this particular example: You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html Here is the code I utilized: ...
I've managed to get it working to some extent, but I still need the col-**-6 elements to not stack on top of each other on smaller screens. This image shows what I'm aiming for: Each color represents a col-**-6. That's the layout I want, ...
Within my AngularJS app, I've come across the following code: example.html <div> <p>{{name}}</p> </div> <div> <button ng-click="someFunction()"></button> </div> exa ...
I am currently facing an issue with arranging a container inline and it seems like there is something missing in my CSS code. After applying float:right, the class "second" does not seem to work as expected. Here's how my container is structured: &l ...
Why does my overflow text only show ellipsis when one parent element with display: flex is removed? It seems the text width determines the parent's width rather than using ellipsis. To test this behavior, try reducing the browser width in the provided ...
My view model is structured like this : function ImageViewModel() { var self = this; self.totalRecordCount = ko.observable(); self.currentRecordCount = ko.observable(); self.images = ko.observableArray(); // fetching all ava ...
I'm currently developing an interactive text-based game that relies on button functionality to change text content. Everything was functioning perfectly until just a few moments ago, but now it has inexplicably stopped working. Here is the section of ...
I recently started working with material-UI. I have a menu component that looks like this: <Menu classes={{ paper: css.paperMenu }} className={classNames({ [css.menuMarginTop]: true })} > .menuMarginTop { margin-top: 14px; } In ...