I've recently created a Shopify site for the first time and followed the tutorial here for adding a jQuery delivery date picker to the cart page. The date picker itself works fine, however I would like to increase the text size of the inputted date in the box (see the below linked image).

The text I wish to increase in size

I tried a few different things, but the only thing I managed was to increase the size of the text above and below the date box I was actually trying to change.

Here is the code:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="font-size: 18px; width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" > Same day orders must be placed before 11am.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;
        
        $(function() {
          $("#date").datepicker({
          dateFormat: 'dd/mm/yy',
          minDate: 0,
          maxDate: ' 2W',
        });
      });
    }
  }
</script>

CodePudding user response：

This can be solved by just setting your desired font-size for this element in your CSS:

#date {
  font-size: 20px; /* change this to whatever size you want.  */
}

Maybe you have other input fields and would like the same look and feel for each of them? Then you can see if there is a class you can copy from one of the existing input fields.

Alternatively you can set your style as inline style (like you did with the div)

<input style="font-size: 25px;" ...> (change value to your desired value)