My goal is to change the color of the input buttons from grey to black

I need help creating a webpage without JavaScript. Everything looks perfect except for the gray input/submit boxes. I've tried various options with code for buttons, but I can't seem to change the color to black, blue, or transparent. Is it even possible? If so, how can I achieve it? Please, someone help me.

.input { 
  background-color: transparent; 
  background: #7ec2cf; 
  color: #eaed5e; 
  font-size: 15px; 
  line-height: 15px; 
  padding: 3px; 
  border-radius: 2px; 
  font-family: Georgia, serif; 
  font-weight: bold; 
  text-decoration: none; 
  font-style: normal; 
  font-variant: small-caps; 
  text-transform: none; 
  border-color: #7ec2cf; 
  border-style: #7ec2cf 2px; 
  display: inline-block; 
} 

.input:hover { 
  background: #eaed5e; 
  color: #7ec2cf
} 

.input:active { 
  background: #7ec2cf; 
  color: #eaed5e
}
<div class="input">
  <input value="Logout" type="submit">
</div>

<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">

css

Answer №1

Here is the HTML code:

<form method="post">
<div>
<input value="Logout" type="button" class="press">
</div>
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">
</form>

This is the CSS code:

.press {
   background-color: blue;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.input:hover { background: #eaed5e; color: #7ec2cf} .input:active { background: #7ec2cf; color: #eaed5e }

Does this meet your requirement?

Answer №2

Your CSS issue stems from the selector you've chosen - .input, which refers to class names input. Instead, consider using one of the following options to select the button:

.input input{
//insert your button code here
}

or 

.input>input{
//insert your button code here
}

Alternatively, you could simplify it by just using:

input {
//insert your button code here
}

Answer №3

Check out this sample below. Simply eliminate the div and add the .input class to the input element. Also, keep in mind that using background-color is unnecessary in this scenario.

.input { 
  background: #7ec2cf; 
  color: #eaed5e; 
  font-size: 15px; 
  line-height: 15px; 
  padding: 3px; 
  border-radius: 2px; 
  font-family: Georgia, serif; 
  font-weight: bold; 
  text-decoration: none; 
  font-style: italic; 
  font-variant: small-caps; 
  text-transform: none; 
  border-color: #7ec2cf; 
  border-style: solid 2px #7ec2cf; 
  display: inline-block; 
} 

.input:hover { 
  background: #eaed5e; 
  color: #7ec2cf
} 

.input:active { 
  background: #7ec2cf; 
  color: #eaed5e
}
<input value="Logout" type="submit" class="input">

<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The angular content is not scrolling

I have a basic angular content window that contains an adjustable group of settings values. When the window is collapsed, the fxLayout collapses properly, but I am having difficulty scrolling vertically. I have attempted to use overflow-y and just overflow ...

cssangularangular-material

What is the purpose of row-gap (and column-gap) in both Flexbox and Grid Layouts?

While researching browser compatibility for the gap property, I came across this informative page: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap. The page includes examples for both Flex and Grid Layouts, leading me to assume it would only work ...

htmlcssflexboxcss-grid

Decrease the height of a div element from the top with the use of jQuery

My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...

javascriptjqueryhtmlcss

Ways to minimize excessive gap between two columns in Bootstrap

How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone ex ...

htmlcsstwitter-bootstrap

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

htmlinternet-explorercss

What might be causing the lack of JSON updates appearing on my webpage?

I am facing an issue with my JSON file. After making updates to the file, the changes are not reflected on my webpage. Even after refreshing multiple times, only the old data is being displayed. I am using xampp local server and ajax for retrieving the JSO ...

javascripthtmlcssjsonajax

How can I show pagination links as buttons on a gridview in ASP.NET?

When working on asp.net web forms, I encountered an issue where I was unable to display pagination links as buttons with a gray background on the grid view control. To achieve this, I needed to assign a CSS class to the pager style on the grid view in ord ...

cssasp.netbootstrap-4gridview

What is the best way to apply an outer border to a table using CKEDITOR?

Is there a way to only add an outer border to an HTML table in CKEDITOR? I've attempted to remove the inner borders using the advanced options in CKEDITOR, but it doesn't seem to be working. <table border="1" cellpadding="1" cellspacing="1" ...

htmlcss

Implementing dynamic styling with Alpine JS when hovering

I am working with 2 color pickers, one for background and one for text. These are connected to the styles of a button <button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button> Everything is funct ...

cssalpine.js

Customizing the appearance of a Vue.js Single Page Application with

I have a custom-built Vue.js single page application and I am interested in implementing user-switchable dynamic themes. I envision a scenario where users can easily toggle between 'light' and 'dark' themes by clicking a button, and hav ...

javascripthtmlcssvue.jswebpack

Material UI AppBar fixed position that is not part of a grid container

Hey everyone, I'm really struggling with this issue. I recently set my AppBar to have a position of "fixed". However, now the appbar is no longer contained within its container and instead spans the entire screen. I've been trying to figure it ou ...

cssreactjsmaterial-ui

Displaying a small icon hyperlink when text is hovered over

Encountering an issue with getting a glyphicon link to appear when hovering over text. This specific div is in my HTML. <div class="editable container"> <h1>File Name: filename<a href="#"><span class="pencil glyphicon glyphicon-penci ...

javascripthtmlcss

Issues with divs not aligning properly

Having trouble centering the results of freeCodeCamp's Twitch.TV project? Even though you've tried using margin: auto and class='text-center', the section containing the results remains left-aligned. How can you ensure that the results ...

jqueryhtmlcss

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries

Formatting a span class within a bullet point item

How can we apply styling to a span class within a list item using CSS? I have attempted the following code, but it does not seem to be working: wrap.error { color: #FF0000; display: block; } <ol> <li> <span class='error&ap ...

htmlcss

D3 Chart: What is the best way to insert images into a node?

Within the jsFiddle demo provided in this query, there is code displayed. I am curious about how I can assign images to each node. var graph = { "nodes":[ {"name":"1","rating":90,"id":2951}, ] } You can access my jsFiddle Demo through this ...

javascriptjquerycssd3.js

What is the complete pathway in CSS?

Consider this scenario: within my CSS file, there is a line of code used to display an image - specifically, a label icon located in the sidebar. background-image:url(../assets/images/icons/arrow_state_grey_expanded.png); However, due to its relative pat ...

cssrelative-pathfilepathcodeigniter-2

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...

javascripthtmlcssreactjs

The issue persists where Tailwind Inline color decorators are unable to function properly alongside CSS variables

In my current project using Tailwind CSS with CSS variables for styling, I have noticed a peculiar issue. The color previewers/decorators that usually appear when defining a color are not showing up in my class names. These previewers are quite helpful in ...

javascriptcssreactjsvisual-studio-codetailwind-css

Position the flex item adjacent to the initial flex item using wrap mode only if there is extra space

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl ...

htmlcssflexbox