We Keep Coding

No same value picked for multiple input range slider

I would like to control all slider value in a function where no same number is picked twice for the slider value and if it's picking the same number, the slider should show an error and only if all slider contains a different value, it'll proceed to show the next button. But I don't know what value should I refer to check if the value is already used. I tried looping the array but it just doesn't make that much sense and not work at all
import React from 'react'
import subjectCategories from './categories';
export default function InterestScore() {
const[range,setRange]=React.useState(
{cyberSecurity:"1",
projectManager:"1",
developer:"1",
productManager:"1",
devOps:"1",
marketer:"1",
designer:"1",
writer:"1"}
);
function handleChange(e) {
setRange(prevRange=>{
return (
{...prevRange, [e.target.name]:e.target.value}
)
})
for(let i=0;i<8;i++) {
if(range[e.target.name]===e.target.value) {
console.log("cannot pick same number twice");
}
}
}
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
e.style.setProperty('--value', e.value);
e.style.setProperty('--min', e.min == '' ? '1' : e.min);
e.style.setProperty('--max', e.max == '' ? '10' : e.max);
e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
return (
<div className='interest_score'>
<div className='q_card'>
<p>Score your level of interest in these job titles:</p>
<div className='range_container'>
{subjectCategories && subjectCategories.map((category) => {
return (
<div className='category_group' key={category.id}>
<div className='labels'>
<label className='range_label'>{category.subject}</label>
<span>{range[category.name]}/10</span>
</div>
<input type='range' min='1' max='10' name={category.name}
className='styled-slider slider-progress'
onChange={(e)=>handleChange(e)} value={range[category.name]}/>
</div>
);
})}
</div>
<p>* You cannot pick a number twice</p>
<button className='next'>Next</button>
</div>
</div>
)
}
const subjectCategories = [
{id:1,subject:"Cyber Security",name:"cyberSecurity"},
{id:2,subject:"Project Manager",name:"projectManager"},
{id:3,subject:"Developer",name:"developer"},
{id:4,subject:"Product Manager",name:"productManager"},
{id:5,subject:"DevOps",name:"devOps"},
{id:6,subject:"Marketer",name:"marketer"},
{id:7,subject:"Designer",name:"designer"},
{id:8,subject:"Writer",name:"writer"}
]
export default subjectCategories;
.interest_score {
margin:5rem 1rem 0 7rem;
}
.interest_score p {
text-align:left;
padding:1em 3em;
}
.range_container {
margin-top:0.5em;
padding:0.5em 2em;
color:#ACB7EB;
font-size:14px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}
.category_group {
display:flex;
flex-direction:column;
align-items:flex-start;
flex:1 0 45%;
padding:1.5em 1em;
}
.range_container label {
width:100%;
text-align:left;
}
.labels {
display:flex;
justify-content:space-between;
width:100%;
}
.labels span {
color:black;
}
.q_card p:nth-of-type(2){
color:#ACB7EB;
}
/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
height: 1.8em;
width:100%;
-webkit-appearance: none;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 1.4em + var(--ratio) * (100% - 1.4em));
}
input[type=range].styled-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - max(1.4em * 0.5,4px));
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 10px;
border: 1px solid #b2b2b2;
border-radius: 0.5em;
background: #EFEFEF;
box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: rgba(241, 243, 253, 1);
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-webkit-slider-thumb:active {
background: rgba(241, 243, 253, 1);
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #EFEFEF;
}
input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #E5E5E5;
}
input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #F5F5F5;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
width: max(calc(1.4em - 4px - 4px),0px);
height: max(calc(1.4em - 4px - 4px),0px);
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}
input[type=range].styled-slider::-moz-range-track {
height: max(calc(1em - 1px - 1px),0px);
border: 1px solid #b2b2b2;
border-radius: 0.5em;
background: #EFEFEF;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #FFFFFF;
}
input[type=range].styled-slider:hover::-moz-range-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-moz-range-thumb:active {
background: #FFFFFF;
}
input[type=range].styled-slider:active::-moz-range-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #EFEFEF;
}
input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #E5E5E5;
}
input[type=range].styled-slider.slider-progress:active::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #F5F5F5;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #EFEFEF;
border: 1px solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #FFFFFF;
}
input[type=range].styled-slider:hover::-ms-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-ms-thumb:active {
background: #FFFFFF;
}
input[type=range].styled-slider:active::-ms-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em 0 0 0.5em;
margin: -1px 0 -1px -1px;
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border: 1px solid #b2b2b2;
border-right-width: 0;
}
input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border-color: #9a9a9a;
}
input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border-color: #c1c1c1;
}

You can check if there are duplicate range values on different sliders like this:
const currentValues = Object.values(range);
const uniqueRangeValues = [...new Set(currentValues)];
const hasError = currentValues.length !== uniqueRangeValues.length;
And you get the hasError variable and use it in jsx like this:
{hasError ? (
<p>* You cannot pick a number twice</p>
) : (
<button className="next">Next</button>
)}
You can take a look at this sandbox for a live working example of this solution.

Is there anyway to get shared linear gradient on children having rounded border inside div in CSS?

I want to use continuous gradient over different buttons having same parent. I have came across technique to use span tag having background color but, thing is button have border-radius. How do I achieve it in CSS?
Effect I'm trying to achieve

I think background-attachment: fixed will work for you.
.container {
display: inline-block;
width: auto;
}
.container .button {
border: 1px solid transparent;
color: #fff;
display: inline-block;
border-radius: 100px;
padding: 10px 40px;
background-image: linear-gradient(to right, red, blue, red);
background-attachment: fixed;
}
<div class="container">
<div class="button">Hey</div>
<div class="button">World</div>
</div>
Edit: I had to add 3rd parameter to background-attachment to make the blue more visible.

The background attachment method by Debsmita seems like a less trickier approach. An alternative would be to adjust the gradients of both buttons so the gradient of second button starts where the gradient of first button ends.
/* The small button's gradient starts from where medium button's gradient ends which causes the shared gradient effect. The large button is used for comparison. */
button {
color: white;
font-weight: 700;
cursor: pointer;
padding: 8px;
border-radius: 15px;
box-shadow: 0px 10px 16px -4px rgba(0, 0, 0, 0.49);
background: rgb(131, 58, 180);
}
button:focus {
outline: none;
/*For testing*/
}
.btn-md {
width: 40%;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 100%);
}
.btn-sm {
width: 20%;
background: linear-gradient(90deg, rgba(253, 29, 29, 1) 0%, rgba(252, 176, 69, 1) 100%);
}
.btn-lg {
display: block;
margin-top: 16px;
width: 60%;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}
/* Gradient from: https://cssgradient.io/ */
/* Box shadow from: https://www.cssmatic.com/box-shadow*/
<body>
<button class="btn-md">2,333,333 Members</button>
<button class="btn-sm">Top #2</button>
<button class="btn-lg">2,333,333,333 Members</button>
</body>
Edit: 07/29/2020
This version makes it easier to add additional buttons but it's still based on fixed values. The gradient spans across 1 to 4 buttons that are siblings. You can expand it for more buttons but you would have to add more color positions from the gradient.
/* A button's gradient starts from where the button to its left gradient ends which causes the shared gradient effect. The gradient is fixed across four buttons so each position will always have the same gradient.
Each button uses 2 gradients so for 4 button you need 5 gradients, with each of the 4 buttons using 25% of the full gradient. The color breakpoints were selected using cssgradient.io*/
:root {
--gradient1: rgba(131, 58, 180, 1);
--gradient2: rgba(182, 46, 117, 1);
--gradient3: rgba(253, 29, 29, 1);
--gradient4: rgba(253, 87, 45, 1);
--gradient5: rgba(252, 176, 69, 1);
}
.container {
margin-top: 16px;
}
button {
color: white;
font-weight: 700;
cursor: pointer;
padding: 8px;
margin-top: 20px;
border-radius: 15px;
box-shadow: 0px 10px 16px -4px rgba(0, 0, 0, 0.49);
}
button:focus {
outline: none;
/*For testing*/
}
.btn-grad-4 {
width: 20%;
background: var(--gradient1);
}
.btn-grad-4:nth-of-type(1) {
background: linear-gradient(90deg, var(--gradient1) 0%, var(--gradient2) 100%);
}
.btn-grad-4:nth-of-type(2) {
background: linear-gradient(90deg, var(--gradient2) 0%, var(--gradient3) 100%);
}
.btn-grad-4:nth-of-type(3) {
background: linear-gradient(90deg, var(--gradient3) 0%, var(--gradient4) 100%);
}
.btn-grad-4:nth-of-type(4) {
background: linear-gradient(90deg, var(--gradient4) 0%, var(--gradient5) 100%);
}
/* Gradient from: https://cssgradient.io/ */
/* Box shadow from: https://www.cssmatic.com/box-shadow*/
<body>
<div class="container">
<button class="btn-grad-4">Top#1</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4">Top#2</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4">Top#2</button>
<button class="btn-grad-4">Top#3</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4">Top#2</button>
<button class="btn-grad-4">Top#3</button>
<button class="btn-grad-4">Top#4</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4" style="width: 40%;">Top#2</button>
<button class="btn-grad-4">Top#3</button>
</div>
</body>

How to animate the fill of an arc in CSS? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is there a way we can fill color of css semi-circle in an incremental way in anticlockwise direction like a progress bar.
Here is the semi-circle code. https://jsfiddle.net/sonymax46/wqfovdjh/7/.
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid blue;
transform: translateX(50%);
}
I want existing blue colour to be filled with Green on an event. How to achieve this with css O SVG
Thank in Advance

Option A is to use a container that cut's off a circular element and a pseudo-class as a "mask" over the top of the circle. Then a gradient background shows the other color when the element is rotated.
The major drawback to this is you have to have a solid color background that the overlay can match visually.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
/* just to show the box could be transparent */
background-color: lightgray;
cursor: pointer;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
/* Use relative on parent so mask aligns */
left: 50%;
/* Move the circle 'outside' the wrapper */
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.arc:after {
/* this creates the 'mask' */
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
background-color: white;
border-radius: 50%;
}
.wrapper:hover .arc {
/* rotate the full element because we can't transition backgrounds */
transform: rotate(-180deg);
}
.gradientExample {
/* just to show the gradient */
height: 20px;
width: 200px;
margin: 0 20px;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the arc</p>
<div class="wrapper">
<div class="arc"></div>
</div>
<div class="gradientExample"></div>
Option B - Use a clip-path instead of overlapping elements. This is much better but you need to create an SVG object to use for the arc and that's a pain from a sizing standpoint.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
background-color: lightgray;
cursor: pointer;
}
.svgArc {
width: 100%;
height: 100%;
position: relative;
clip-path: url(#svgPath);
}
.svgArc:after {
/* have to use a pseudo element because we can't rotate the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.v2:hover .svgArc:after {
transform: rotate(180deg);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the gray square</p>
<div class="wrapper v2">
<div class="svgArc">
</div>
</div>
<svg width="0" height="0" viewBox="0 0 200 200">
<defs>
<clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
</clipPath>
</defs>
</svg>
Option C - Create an SVG circle and animate the offset-path. See my answer and example here: How to make linear css transition to SVG path?

maybe with css custom variables ?
const Root = document.documentElement
, btColor = document.getElementById('bt-color')
;
btColor.onclick=_=>
{
Root.style.setProperty('--bColor', 'green')
}
:root {
--bColor : blue;
}
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid var(--bColor);
transform: translateX(50%);
}
<div class="cc">
<div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>

Instant icon color change

The page has more than one textbox. Each TextBox has an icon next to it. If the textbox is full, the icon is gray, but if it is blank, keep it in color. How can I do this with Jquery?
$(".my-input").each(function () {
var txtvalue = $(this).val();
if (txtvalue==" ") {
//I don't know how to change the color
} else { }
//I don't know how to change the color
});

Since your question is not having any color specifications. I assume it as generic one.
There are 3 approaches for your scenario
1.You need to use different images and load it conditionally.
2.Use transparent image like png or svg and add background color conditionally.
3.Use filter properties of CSS3
Hope it helps

https://jsfiddle.net/FllnAngl/ps02f00k/3/
I made it so that it changes after you press a button, or would you rather have an instant change as soon as the input has a value?
EDIT
https://jsfiddle.net/FllnAngl/ps02f00k/4/
Here's a fiddle with a live check if the input field has a value or not, if the input has a value: the div square turns gray. If it doesn't have a value: the div square turns yellow
EDIT 2
https://jsfiddle.net/FllnAngl/45xyomdh/2/
Here's a fiddle with an arrow shaped div that changes colors as soon as there's something in the input field
/*if input is full, make yellow arrow gray*/
$('.input1').on('keyup', function() {
var value = $('.input1').val();
if (value === "") {
$('.arrow_box').css('border', '4px solid rgba(255, 225, 0, 1)');
$('.arrow_box').removeClass('aftertoggle');
$('.arrow_box').removeClass('beforetoggle');
} else {
$('.arrow_box').css('border', '4px solid rgb(128,128,128)');
$('.arrow_box').addClass('aftertoggle');
$('.arrow_box').addClass('beforetoggle');
}
})
.square {
width: 25px;
height: 25px;
float: left;
margin-top: 10px;
}
.input1 {
height: 19px;
margin-left: 15px;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid rgba(255, 225, 0, 1);
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: rgba(255, 225, 0, 1);
border-width: 10px;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: rgba(255, 225, 0, 1);
border-width: 12px;
margin-top: -12px;
}
.aftertoggle:after {
border-color: rgba(136, 183, 213, 0) !important;
border-left-color: rgb(128, 128, 128) !important;
border-width: 10px;
margin-top: -10px;
}
.beforetoggle:before {
border-color: rgba(194, 225, 245, 0) !important;
border-left-color: rgb(128, 128, 128) !important;
border-width: 12px;
margin-top: -12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">
<div class="arrow_box">
</div>
</div>
<input type="text" class="input1" placeholder="Type something! :)" />

jQuery disable enable button style

I am trying to make a disable enable button style using jquery.
This is my DEMO page from Codepen
In my demo you can see there is a blue color submit button . When you write something in input filed then button is active.
I want to add when this button disable color is red. If the button not desable then button color change to blue.
I have create .enableOnInput and .red Css style for button.
.enableOnInput {
width: 200px;
height: 25px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: bold 10px/25px "Lucida Grande";
border: 1px solid rgba(0,153,224,1);
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-image: rgba(66,66,66,1);
background-image: -webkit-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: -moz-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: -o-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: -ms-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
background-image: linear-gradient(top, #3db5ed 0%,#0099e0 100%);
}
.red {
width: 20px;
height: 25px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: bold 10px/25px "Lucida Grande";
border: 1px solid rgba(0,153,224,1);
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-image: rgba(66,66,66,1);
background-image: -webkit-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: -moz-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: -o-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: -ms-linear-gradient(top, #ff0000 0%,#c20202 100%);
background-image: linear-gradient(top, #ff0000 0%,#c20202 100%);
}
This is my jquery for disable enable:
$(function(){
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') { //Check to see if there is any text entered
//If there is no text within the input ten disable the button
$('.enableOnInput').attr('disabled', 'true');
$(".aa").show();
$(".bb").hide();
} else {
//If there is text in the input, then enable the button
$('.enableOnInput').attr('disabled', false);
$(".aa").hide();
$(".bb").show();
}
});
});

Add this css rule:
input:disabled
{
background-color: red;
/*other style properties*/
}

Simply use addClass/removeClass methods:
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') { //Check to see if there is any text entered
//If there is no text within the input ten disable the button
$('.enableOnInput').prop('disabled', true).addClass('red');
$(".aa").show();
$(".bb").hide();
} else {
//If there is text in the input, then enable the button
$('.enableOnInput').prop('disabled', false).removeClass('red');
$(".aa").hide();
$(".bb").show();
}
}).keyup();
I also added trigged for keyup event to check initial state and set proper class.
UPD. Or as #Terry suggests in comments it's even better to change CSS selector to from .red to .enableOnInput:disabled and go with just $('.enableOnInput').prop('disabled', true). Just note that this way it will not work in IE8 and below.
Demo: http://codepen.io/anon/pen/CELut?editors=001

Add Class red to your button
<input type='submit' name='submit' id='submitBtn' class='enableOnInput red' disabled='disabled' />
add css rule
.red{
background-color:red;
}
and your js
$(function(){
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') { //Check to see if there is any text entered
//If there is no text within the input ten disable the button
$('.enableOnInput').attr('disabled', 'true');
$(".aa").show();
$(".bb").hide();
$('#submitBtn').addClass('red');
} else {
//If there is text in the input, then enable the button
$('.enableOnInput').attr('disabled', false);
$(".aa").hide();
$(".bb").show();
$('#submitBtn').removeClass('red');
}
});
});
Updated Link