In PHP/HTML, input submit does not work with CSS styling

I am struggling with styling the input submit button in my form. I want the button to appear as text with a change in background and font color on hover. Any solutions?

input[type="submit"] {
  font-family: made, mirage;
  text-decoration: none;
  background-color: none;
  background-color: #383e42;
}

input[type="submit"]:hover {
  background-color: white;
  cursor: pointer;
}
<form action="" method="post">
  <input type="text" name="yourmail" placeholder="Your email:">
  <input type="text" name="subject" placeholder="Subject:">
  <textarea name="message" placeholder="Message text" rows="10"></textarea>
  <input type="submit" name="send-mail" id="" value="Send" />
</form>

htmlcss

Answer №1

Make sure to enclose your CSS code within the <style></style> tags.

<form>
<input type="text" name="email" placeholder="Your email:">
                        <input type="text" name="subject" placeholder="Subject:">
                        <textarea name="message" placeholder="Message text" rows="10"></textarea>
                        <input type="submit" name="send-mail" id="" value="Send"/>
                    </form>
<style>
    input[type="submit"] {
        font-family: Arial, sans-serif;
        text-decoration: underline;
        background-color: transparent;
        background-color: #394867;
    }

    input[type="submit"]:hover{
        background-color: #ffffff;
        cursor: pointer;
    }
</style>

Answer №2

If you want the button to blend in as normal text:

  • Adjust background-color to unset
  • Change border-style to none

For hover effects, simply modify the background and text color.

input[type="submit"] {
  border-style: none;
  font-family: made, mirage;
  text-decoration: none;
  color: black;
  background-color: unset;
}

input[type="submit"]:hover {
  background-color: white;
  cursor: pointer;
  color: white;
  background-color: #383e42;
}
<form action="" method="post">
  <input type="text" name="yourmail" placeholder="Your email:">
  <input type="text" name="subject" placeholder="Subject:">
  <textarea name="message" placeholder="Message text" rows="10"></textarea>
  <input type="submit" name="send-mail" id="" value="Send" />
</form>

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

Ensure HTML5 video fills window completely without any overflow

I'm currently developing a new open-source alternative to Plex and I am facing some challenges with the in-browser video player. My goal is to have the video player maximize its size within the window during playback, similar to what Chrome and Netfli ...

csshtmlvideoprimefaces

What is the process for connecting CSS to an HTML page?

In my project, I have an index.html file and a style.css file. Currently, I am using inline CSS in my HTML file but now I want to utilize an external stylesheet. Inside my index.html file, just before the closing </head> tag, I have added the followi ...

htmlcss

Is there a way to determine if a browser is operating in compatibility mode?

Is there a way to determine if the browser is in compatibility mode or not? I need to apply different CSS depending on the mode. ...

asp.nethtmlcssie-compatibility-mode

What steps should I take to address the issue of fixing the classname rather than using the

<div ng-class:"{{myclass}}" role="progressbar" aria-valuenow="{{roundedtotalPerformanceCount}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( totalPerformanceCount + '%' ) }"> {{roundedtotalPerformanceCou ...

javascriptcssangularjs

Guide to extracting data from an XML file using AJAX

Here is the XML data I have: <resultitem> <itemname>Restaurant</itemname> <address>Some Road</address> <rating>4</rating> </resultitem> <resultitem> <itemname>Cafe</itemname> <address> ...

jqueryhtmlajaxxml

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...

javascriptjqueryhtmlcss

concealing the upper header while scrolling and shifting the primary header upwards

Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...

javascripthtmlcsswordpress

Tailwind's unique approach to custom @font-faces allows for

Recently, I've been working on a project with Tailwind CSS. I encountered an issue when trying to implement a custom font using @font-face. Despite placing the font file in public/assets/font directory, it still doesn't seem to load properly. Her ...

htmlcssfont-facecustom-font

Combining broken down values within a loop

https://i.sstatic.net/PI3NI.png Take a look at this image, then review the code I've provided: function addNumbers() { var inputList = document.getElementById("listInput").value.split(" "); for(i = 0; i <= inputList.length; i+=1) { ...

javascripthtml

What could be causing mobile phones to overlook my CSS media query?

My CSS includes 3 media queries that function properly when I resize the browser, but fail to work when using the responsive design tool in the inspector ("toggle device mode") and on mobile devices. Snippet of my CSS code : @media screen and (max-width: ...

htmlcssresponsive-designmedia-queries

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

javascriptjqueryhtmlcsssafari

The modal popup is getting lost behind the slider

I am facing an issue with opening a Modal popup for customer details. The problem occurs when the modal opens behind a slider on the website. However, when I slide the page down, the content of the modal becomes fully visible. https://i.stack.imgur.com/wR ...

htmlcssmodal-dialog

Breaking the loop with a simple statement

I'm unsure if anyone will notice if I make changes to my preceding post, so I am here now to create a new one. Below is the code snippet: $(document).ready(function(){ var a; var b; var c; var d; var pmmain = ["Citrix", "Coach", ...

javascriptjqueryhtmlarraysbreak

Ways to position an element at the center using Flexbox技

Having some difficulty centering an element in my code using flexbox. It seems to work for everything else, but not here. Any suggestions or ideas? .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; ...

htmlcssflexbox

Demystifying Vertical Alignment: Everything You Need to Know

Struggling with vertical alignments has proven to be more complicated than expected. Despite reading numerous resources on stackexchange, a common understanding of the process remains elusive. After gathering some guidelines, it turns out that vertical-al ...

htmlcssvertical-alignment

Pick out grouped objects without the use of Javascript

I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work. As an experiment, I am trying to ac ...

htmlcss

Unusual patterns appearing in HTML image files

As a beginner in html, please pardon my silly questions and mistakes. I have designed this webpage: <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <style type = text/css> #topbar { ...

htmlcssimagepixel

How can I achieve a transparent background for a text field in CSS instead of white?

I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...

css

loading dynamic content into an appended div in HTML using Angular

Here is the HTML code from my app.component.html file: <button mat-raised-button color="primary" mat-button class="nextButton" (click)="calculatePremium()"> Calculate </button> <div id="calcul ...

javascriptcssangulartypescriptdynamic

The Jquery .remove() function will only take effect after the second click

I am currently working on implementing a notifications feature using bootstrap popover. The issue I am facing is that after a user clicks on a notification, it should be removed. However, for some reason, it requires two clicks to actually remove the notif ...

javascriptjquerycsstwitter-bootstrappopover