What is the best way to adjust the size of an HTML form submit button

I have been working on a simple HTML form that I styled with CSS. I attempted to adjust the size of the submit button using the height attribute, but for some unknown reasons, it just wouldn't cooperate. However, when I tried using the width attribute, it worked perfectly fine. Interestingly, increasing the font-size attribute did affect the height of the button to some extent. Yet, once the font-size went beyond 20px, it stopped responding altogether.

My browser of choice is Safari.

div {
  background-color:cadetblue;
  padding: 10px;
  border: 1px black solid;
}
form {
  margin-left: -15px;
}
label {
  display:block;
}
fieldset {
  border: none;
  display: inline;
}
input[type="submit"] {
  padding: 0px;
  height: 5em;
}
input[type="text"] {
  margin-left: 0px;
  width: 200px;
  height: 20px;
}
<div>
  <p>HTML FORM: nameform.htm - programmed by {Maihan Nijat!}</p>   
  <form method="post" action="greeting.php"> 
    <fieldset> 
      <label for="firstname" >Please enter your first name:</label> 
      <input name="firstname" type="text" />
    </fieldset>
    <input type="submit" value="Submit!" />
  </form>
  <hr> 
  <p>Copyright © 2014 <a href="http://www.php.net">The PHP Web Site</a>
  </p>
</div>

Answer №1

Consider including -webkit-appearance: none; in your CSS for the submit button. This will prevent any conflicts with webkit styles.

https://css-tricks.com/almanac/properties/a/appearance/

div {
  background-color:cadetblue;
  padding: 10px;
  border: 1px black solid;
}
form {
  margin-left: -15px;
}
label {
  display:block;
}
fieldset {
  border: none;
  display: inline;
}
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  padding: 0px;
  height: 5em;
}
input[type="text"] {
  margin-left: 0px;
  width: 200px;
  height: 20px;
}
<div>
  <p>HTML FORM: nameform.htm - programmed by {Maihan Nijat!}</p>   
  <form method="post" action="greeting.php"> 
    <fieldset> 
      <label for="firstname" >Please enter your first name:</label> 
      <input name="firstname" type="text" />
    </fieldset>
    <input type="submit" value="Submit!" />
  </form>
  <hr> 
  <p>Copyright © 2014 <a href="http://www.php.net">The PHP Web Site</a>
  </p>
</div>

Answer №2

If you want to switch it up, consider changing the element to a button like this: https://example.com/f6g2tnh4/

You can then style it using code similar to this:

button {/* Style your button here*/
  font-size:18px;
  width:180px;
  height:140px;
  background:salmon;
}

Answer №3

Modify this attribute within your CSS file.

input[type="submit"] {
     width: 10em;
}

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

Disable the full screen camera mode on iOS browsers while live streaming camera video

I recently completed a tutorial on capturing video streams from the front or rear camera of an iPhone using JavaScript. The tutorial can be found at this link. While testing the functionality on my desktop browser, everything worked perfectly. However, wh ...

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

How can I modify the appearance and behavior of an HTML button?

I simply need to update the button class and value in order to change the button's functionality. After successfully changing the value and class, the functionality remains the same as the old class. Why is this happening? Could it be that the brows ...

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

Positioning textboxes of varying heights in a vertical alignment, causing one to commence directly below the other

Seeking assistance with creating text boxes for displaying reviews on a website. Each review is contained in a box, with varying heights based on the amount of text. Desired layout is shown in the image below, with black boxes representing review container ...

Angular implementation of a dynamic vertical full page slider similar to the one seen on www.tumblr

I'm determined to add a full-page slider to the homepage of my Angular 1.x app After testing multiple libraries, I haven't had much luck. The instructions seem incomplete and there are some bugs present. These are the libraries I've experi ...

Anchor tags appear to be properly connected to IDs, however they are not functioning correctly

I can't seem to understand why this issue is occurring. My navigation bar works fine and the anchor links are functioning as expected, but when I click on them, the page either reloads or turns into a blank white screen. Here's a link to the pag ...

What exactly does white space signify during the inspection process?

For quite some time now, I've been experiencing a strange problem with webpack. The layout in Dev seems to be slightly different than the build. While inspecting in Firefox, I noticed that the difference lies in the white space. My question is, what e ...

checkbox inspired by the design of the iPhone

I'm looking to create a custom checkbox! <label id="sliderLabel"> <input type="checkbox" /> <span id="slider"> <span id="sliderOn">SELECTED</span> <span id="sliderOff">SELECT</span> ...

Is there a syntax problem with the jQuery (this).next() statement that is causing it to not

Struggling with the implementation of a .next() selector. It seemed straightforward, but I must be missing something. Here's the current script that is not functioning as expected: $('.ITEM').hover(function (){ $(this).next('.ITEM ...

Why are divs appearing over a three js animation when scrolling down on a desktop but not on a mobile device?

I have a Three js animation in the body of the document: container = document.createElement( 'div' ); document.body.appendChild( container ); There are two overlaying divs set with the following styles: #holder { z-index: 1; position: abso ...

The save button click handler is not triggering JQuery Validation

I've been attempting for hours to get the validation working, but without success. I have added the name attribute to the input element and included script sources as well. Even after firing the validate method, the contents are still not being valida ...

What causes jQuery's append function to trigger a redraw of my Div?

I have a unique function that incrementally increases the date by one day every second. Once the date matches specific dates, I aim to update my #newsDiv with extra text content. The #newsDiv will display all historical "news" and will be set to scroll to ...

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below https://i.sstatic.net/aVGwV.png Here is my code: <div class="row"> <div class="col-lg-6&q ...

Combining the elements p and div on a single line

I've designed a card layout with 3 rows containing a paragraph and a div element each. I want both elements in each row to be displayed on the same line. How can I achieve this? Sample HTML: <div class="user_card"> <div class="skills"&g ...

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

Warning: HTML input values are being cleared when added

I've been working on some code that adds an input field when a button is clicked. When the limit reaches 5 (counter), it displays a bootstrap warning. The issue I'm facing is that after hitting "add field" more than 5 times, the values in the fie ...

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. https://i.sstatic.net/xzMVY.png ...

Content will not be visible within the HTML template

While attempting to incorporate an HTML template I discovered online, everything seemed to be functioning correctly except for the fact that the text was not appearing. Following a tutorial required me to use a static file to load the site. Another issue I ...

Straightforward, rudimentary example of Typescript knockout

I am hoping to successfully implement a basic TypeScript Knockout example. I utilized Nugget to acquire the TypeScript Knockout and downloaded Knockout 3.0.o js. Below is my TypeScript file: declare var ko; class AppViewModel { firstName = ko.observa ...