Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code.

<input id="total" type="text" name="total" value="" readonly="readonly" /> 
<p><input type="button" value="=" onclick="total.value=getTotalB(this.form)" />
<p><input type="reset" onClick="reset()" value="-"/>
</form>

I would like the input type="button" and reset buttons to be around 10px in size. Although I've attempted using "width" in the style attribute, I'm unsure about the most efficient way to adjust the size of these buttons. Could someone provide guidance on how to accomplish this?

jqueryhtmlcssinputsize

Answer №1

If you're looking for a quick solution, you can start by using the following code snippet:

input {
    width: 10px;
}

You could also consider adding specific classes to make your styling more precise.

Check out this live demo here: http://example.com/

Answer №2

Simply assign them a similar class and then customize their appearance using CSS:

Here's an example of how it works:

<html><head>

<style type='text/css'>
input.small {
    width:10px;  /* Applies to input elements with the class "small" */
}

</style>

</head><body><form>

<input id="total" type="text" name="total" value="" readonly="readonly" />
<input class='small' type="button" value="=" onclick="total.value=getTotalB(this.form)" />
<input class='small' type="reset" onClick="reset()" value="-"/>

</form></body></html>

This way, you can easily modify both buttons simultaneously and maintain a consistent look.

Get creative with your styling:

<style type='text/css'>
input.small {
    border:1px solid #ccc;
    cursor:pointer;
    padding:0;
    text-align:center;
    width:10px;
}

input.small:hover {
    background:dodgerblue;
}
</style>

By the way, the issue with style="width" is that you're basically telling the button to "style yourself with width."

The button responds with "How much width? I'm not sure, let me just stick to the default."

To resolve this, specify the width explicitly: style="width:10px;" Now your button will be content.

Answer №3

Try using this code instead:

input[type="reset"]{
     max-width: 10px;
}

Answer №4

input[type=button],input[type=reset] {
 width:10px;
}

This CSS rule is specifically designed for resizing buttons of type "button" and "reset". If you want to avoid affecting other button types in your code, this is the perfect solution. For other types of buttons, it's recommended to use classes instead.

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

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

I am in the process of creating a basic HTML page with two sections, each containing content. However, the last content within the second .right div is extending to the bottom of the page, causing it to become scrollable. I attempted to create another div ...

htmlcss

Visit the embedded AJAX feature that is failing to show any results

I've been working on this seemingly simple problem for days now, but I'm still stuck. I have the following Go code... package main import ( "fmt" "net/http" "html/template" "database/sql" _"github.com/mattn/go-sqlite3" ...

htmlajaxgo

jqRangeSlider experiencing performance issues in Chrome browser

Utilizing the jqRangeSlider on my website has been quite challenging. Strangely, when creating multiple instances of the slider, there is a significant delay in rendering on Google Chrome specifically (approximately 1.5-2 seconds for each slider out of 9). ...

javascriptjquery

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: ht ...

cssmenuhover

Incorporate jQuery on elements that are dynamically loaded after the page has finished loading

I need to determine if a dynamically added button is enabled or disabled. How can this be achieved? My goal is to display a message when the button is disabled and remove it when the button becomes enabled. This is my current code: jQuery(document).read ...

javascriptjqueryhtml

Htaccess rules not translating directory-style URLs into query-style URLs

I am currently working on a basic htaccess file to convert directory-style URLs to query-style. For example: a. /public_html/main/folder1/folder2 ... etc b. /public_html/main.php?1=folder1&1=folder2 Despite my efforts with various regex and rewrite r ...

phphtmllinuxapache.htaccess

How can one most effectively parse a JSON object?

I have utilized the $.getJSON method to create a JavaScript object named 'jItems'. Within the page, there is a categorized list of items that correspond to jItems. I want to achieve the functionality where clicking on a category will trigger a fu ...

jqueryjsonparsinggetjson

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

javascripthtml

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

csshtml

Switching the cursor to the following input after a paste event using JQuery

I am currently working on an HTML form that consists of multiple input boxes. I'm looking to focus on the next input box after pasting content into one of them. Below is the code snippet I have been using: $("input").bind('paste', function( ...

javascriptjqueryhtmlkeyboard-eventsjquery-events

Does CSS Horizontal Padding Percentage Stop Relative to Element Once Maximum Width is Reached?

I'm currently in the process of developing my latest portfolio website at and I'm facing a perplexing padding dilemma that has left me stumped. The approach I'm taking with the layout involves each row of content consisting of both an outer ...

htmlcsspaddingviewport

Certain visual elements fail to display properly within the web browser

I have a website with 5 pages (e.g. page1.html, page2.html, etc.), each having its own .css stylesheet. Oddly, some pages display images correctly while others do not. It seems like the issue might be with the specific pages or files, as using the same ima ...

htmlcss

Styling a fixed sidebar in Vue.js

I am currently working on a layout design that includes a fixed sidebar on the left side, positioned beside a container with its own grid structure. Utilizing Vue.js means each template contains <div> elements where I attempt to incorporate additiona ...

htmlcssvue.jsgridsidebar

Peruse through the Vignettes: exclude the `source` and `R code` files in the results

For my R package on GitHub, I created an HTML vignette. When using browseVignettes, the content displayed flawlessly in the browser looks like this: HTML, source, or R code, it opens the same file in three different versions.</p> However, I only wan ...

htmlrr-markdownr-usethis

"Ensuring Consistency: Addressing the Conflict between CSS and Font

I'm encountering a "mixed content" error on my website caused by one font being loaded via HTTP. The font is referenced in a CSS file like this: @font-face { font-family: 'fontXYZ'; src: url('../font/fontXYZ.eot'); src: url ...

htmlcsswebpack

No changes will be made to the database entry

Currently facing an issue where no values are being updated on a specific ID as specified (hardcoded) in the WHERE clause. Can anyone point out what might be going wrong? I have a form with 7 fields to fill out. At the moment, I am focusing on getting th ...

phpjquerymysqlajaxpost

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

htmlcss

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email

Vue-powered custom mute/unmute button malfunctions inexplicably when deployed, despite functioning flawlessly during development phase

I'm currently struggling to understand why the mute/unmute button is not functioning as expected. The issue seems to arise when the code is deployed on Netlify, as it works fine on localhost. Essentially, the button mutes and unmutes the video, but th ...

htmlvue.jsnuxt.js