malfunctioning form submit button after custom styling

My PHP contact form is functioning perfectly fine, but I'm facing a challenge when it comes to styling the submit button.

Here is the current code for the button:

<input type="submit" value="Submit">

I want to enhance the button using CSS. Here is the code I intend to use:

<input type="submit" id="comment-submit" value="Submit">

The CSS for id="comment-submit" is as follows:

#comment-submit {
    width: 144px;
    height: 44px;
    display: block;
    border: 0;
    font-family: "YanoneBold", Arial, sans-serif;
    font-size: 18px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.35);
    padding: 0 4px 4px 0;
    margin: 30px 0 80px 0;
}

Interestingly, the form submits successfully without any styling, but when I apply the CSS, the form becomes unresponsive.

htmlcsscontact-form

Answer №1

Maybe try switching it to a <button type="submit" or adjusting the CSS to input[type=submit]{}. Keep in mind that the latter approach could cause compatibility issues in Internet Explorer.

Answer №2

Instead of setting it as a specific ID, set it as a CLASS

like this: 

.comment_submit {
    width: 144px;
    height: 44px;
    display: block;
    border: 0;
    font-family: "YanoneBold", Arial, sans-serif;
    font-size: 18px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.35);
    padding: 0 4px 4px 0;
    margin: 30px 0 80px 0;
}

<input type="submit" class="comment_submit" value="Submit">

Give this a shot, maybe using an ID is causing issues, change any dashes to underscores, use a basic font instead of a web font, and consider removing the text-shadow property as well.

Answer №3

Apologies for not including my comment earlier, but unfortunately I do not have the necessary privileges.

I successfully tested your example by copying and pasting it. Here is the code snippet:

<form action="" method="get">
    <input type="hidden" name="ble" value="uff" />
    <input type="submit" id="comment-submit" value="Submit">
</form>

Upon testing in Chrome and Firefox, the GET data was successfully sent. If the issue persists, it may be unrelated to this code snippet. One noticeable difference is the lack of a cursor change on submission.

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

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

Hiding content and troubleshooting video playback problems in FancyBox

I'm facing an interesting issue. I've implemented FancyBox lightbox to showcase a "video" tag when users click on the image thumbnail, and it functions well with all varieties of HTML5 video. The challenge arises when testing in browsers older th ...

javascriptjquerycssflash

How can I fix the issue with border-radius not displaying correctly in tcpdf and how can I ensure the text is shown on

Currently, I am utilizing tcpdf to showcase a circle and text together in a PDF. Despite my attempts with the code below, the border-radius attribute is not functioning as expected: Upon implementation, I obtained the following result: https://i.sstatic. ...

htmlcsspdftcpdfborder-radius

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

I'm working on a project where I want the navigation bar to only appear after scrolling a certain distance down the page. However, I've noticed that when I refresh the browser, the navigation bar appears immediately and then disappears once I sta ...

javascripthtmlcssnavigationbar

Retrieving the ID value and activating a click function for each link sharing a common class using jQuery

I'm facing a challenge in enabling the click function for every link with the same class name and unique id. Currently, the click function is only working on the first link, but there could be any number of links - 1, 2, 3, or more... To tackle this ...

javascriptjqueryhtml

Tips for preventing menu flickering caused by overflow during CSS animations

I recently created a vertical menu with an interesting underline effect that appears when hovering over the menu items. Even though the snippet initially failed to execute, I discovered this cool hover effect (taken from here) which I wanted to implement: ...

htmlcss

Navigating to a randomly generated ID in Firestore using Vue - A Step-by-Step Guide

My app uses Firestore as a backend for posts. On the screen displaying all categories, when a new category is created it's added to the list. When a category is clicked, I use its id as a parameter to navigate to that specific category and show the po ...

javascripthtmlvue.jsgoogle-cloud-firestorevue-router

How can I align rectangles with different heights to display side by side using Javascript?

Currently, I am designing a press page for a website where the headlines/articles are displayed in rectangles. To achieve this layout, I am using the following CSS: .press-blocks{ column-count: 4; column-gap: 2em; padding-left: 10%; padding ...

javascripthtmlcssformat

What is the best method to retrieve information from two tables on a webpage that have identical classes?

I am facing a challenge in retrieving or selecting data from two different tables that share the same class. My attempts to access this information using 'soup.find_all' have proven to be difficult due to the formatting of the data. There are m ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup

Can you suggest the best HTML5 structure for a multi-chapter novel?

In the process of creating a small HTML5 book with chapters and sections, I encountered a dilemma when it comes to structuring my documents like this: chapter1.html - introduction to chapter 1 chapter1section1.html - section 1.1 chapter1section2.ht ...

htmlmarkup

Ways to prevent scrolling on mobile web browsers?

I am currently facing an issue with disabling scrolling on a webpage when a user opens a popup, while still allowing them to scroll within the popup itself. The popup element is defined by the following attributes: #popup { display: none; width: ...

javascriptjqueryhtmlcssmobile

At what point does the browser begin fetching the background images specified in a stylesheet?

Are images mentioned in a valid CSS declaration with a background-image value downloaded when the stylesheet is parsed or when the declaration is applied on a page? In simpler terms, do I need to download all background images listed in my stylesheet even ...

cssperformance

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Trying to emphasize specific keywords in a paragraph of text can be challenging. I'm currently puzzled about the distinction between the <b> and <mark> tags. These words are highlighted because they play a crucial role in marketing, prompt ...

html

Emphasize cells and headers when a cell's value deviates from its initial value

I implemented cell editing in my primeng table. Here is the code: <div class="card"> <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }"> <n ...

htmlcssangularprimengangular10

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

What is the best way to target and style anchor links in CSS that are not empty?

Hi there! I am on the hunt for a CSS selector that will target all anchor links that are not empty and contain content. I currently have a selector to identify all links with an anchor attribute, like in this example: a[href*=\#] { background-co ...

htmlcsscss-selectors

Utilizing various z-index values for multiple background images in a single CSS class

My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue ...

htmlcssbackground-imagez-index

Personalized hyperlink element with interjected spacing

I am currently in the process of designing a component library that is based on lit web components. However, I have a suspicion that my issue may not be directly related to Lit itself, but rather connected to shadow DOM. Within my link component, I have d ...

htmlcssweb-componentshadow-dom

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

javascriptjqueryhtmlajaxjquery-load

Dynamic table in Vue.js updates with saved data when button is clicked

I am looking for assistance on how to work with two or more parameters using Vue.js. I have a data-saving functionality where three inputs are used and the data is saved to a table upon button click. There is an $.ajax() function involved, but I need help ...

javascriptjqueryhtmlajaxvue.js