Style Radio buttons in custom form - Debut theme

Highlighted
Shopify Partner
3 0 0

Hi guys, 

 

I'm having some struggles styling the radio buttons on a custom form I've created.

 

This is what I'm trying to achieve

 

I want the radios to look like flat buttons and stay highlighted once selected. Something similar to these https://codepen.io/mblode/pen/gGIAm/ ...Except the buttons are flat, the colours match and each take up 33% of the page.

 

I've made a page template and put the code in there. Every time I add css to the bottom of my stylesheet though it throws the css out for the whole site breaking it. 

 

Here is the page code i've been using - full disclaimer, i'm not an experienced coder, i'm just trying to do this for a friends shop as a challenge for myself.

 

Link to the page:

 

https://custom-debut.myshopify.com/pages/subscription-form-test

 

Here's the page template code:

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
 
<!--  Flower Subscription Form -->
      
<!-- Contact information -->
 
<div class="page-form-section">
  <div class="contact-form contact-form-par form-vertical contact-wedding-form">
      <form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="contact" /><input type="hidden" name="utf8" value="✓" />
  <div class="grid grid--half-gutters">
      <div class="grid__item">
          <h2 class="main-txt-title main-form-title">Just a few contact details to get started:</h2>
        </div>
      </div>
  
      
        <div class="grid grid--half-gutters grid-">
            <div class="grid__item medium-up--one-half">
              <label class="main-txt-title" for="ContactFromFirstName">First Name <span style="color:red">*</span></label>
              <input type="text" id="ContactFormFirstName" class="main-txt-content" name="contact[first_name]" value="" required="required">
            </div>
            <div class="grid__item medium-up--one-half">
              <label class="main-txt-title" for="ContactFormLastName">Last Name <span style="color:red">*</span></label>
              <input type="text" id="ContactFormLastName" class="main-txt-content" name="contactlast_name]" value="" required="required">
            </div>
        </div>
        <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label class="main-txt-title" for="ContactFormPhone">Contact Number <span style="color:red">*</span></label>
              <input type="text" id="ContactFormPhone" class="main-txt-content" name="contact[phone]" pattern="[0-9\-]*" value="" required="required">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="ContactFormEmail" class="main-txt-title ">Email Address<span style="color:red">*</span></label>
              <input type="email" id="ContactFormEmail" class="main-txt-content" name="contact[email]" autocorrect="off" autocapitalize="off" value="" required="required">
            </div>
        </div>
        
           <div class="grid grid--half-gutters grid-">
            <div class="grid__item medium-up--one-half">
              <label class="main-txt-title" for="Address">House/Unit Number<span style="color:red">*</span></label>
              <input type="text" id="ContactFormHouseNumber" class="main-txt-content" name="Address[House or Unit]" value="" required="required">
            </div>
            <div class="grid__item medium-up--one-half">
              <label class="main-txt-title" for="ContactFormStreet">Street <span style="color:red">*</span></label>
              <input type="text" id="ContactFormStreet" class="main-txt-content" name="Address[Street]" value="" required="required">
            </div>
        </div>
        <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label class="main-txt-title" for="ContactFormSuburb">Suburb <span style="color:red">*</span></label>
              <input type="text" id="ContactFormSuburb" class="main-txt-content" name="contact[suburb]" value="" required="required">
            </div>
          
            <div class="grid__item medium-up--one-half">
              <label for="ContactFormEmail" class="main-txt-title ">Post Code<span style="color:red">*</span></label>
              <input type="text" id="PostCode" class="main-txt-content" name="Address[PostCode]" autocorrect="off" autocapitalize="off" value="" required="required">
            </div>
        </div>      
        
        <hr>
        
<!-- Order Details -->
        
        <div class="grid grid--half-gutters">
            <div class="grid__item">
          <h2 class="main-txt-title main-form-title">Subscription Details:</h2>
        </div>
      </div>
        
        <div class="grid grid--half-gutters">
            <div class="grid__item">
                <label class="main-txt-title" for="ContactFormOverall"><strong>First Delivery Date:</strong></label>
                <input type="date" class="main-txt-content" name="firstdelivery" id="firstdelivery">  
 
              </div>
          </div>
 
        <div class="grid grid--half-gutters">
            <div class="grid__item">
                <label class="main-txt-title" for="ContactFormOverall"><strong>Delivery Frequency:</strong></label>
                <input type="radio" class="main-txt-content" name="frequency" id="frequency1" value="weekly"> Weekly
                <input type="radio" class="main-txt-content" name="frequency" id="frequency2" value="fortnightly"> Fortnightly
                <input type="radio" class="main-txt-content" name="frequency" id="frequency3" value="monthly"> Monthly
              </div>
          </div>
        <div class="grid grid--half-gutters">
            <div class="grid__item">
                <label class="main-txt-title" for="ContactFormOverall"><strong>Size:</strong></label>
                <input type="radio" class="main-txt-content" name="size" id="subscriptionsize1" value="small"> Small
                <input type="radio" class="main-txt-content" name="size" id="subscriptionsize2" value="medium"> Medium
                <input type="radio" class="main-txt-content" name="size" id="subscriptionsize3" value="large"> Large
              </div>
          </div>
        
        <div class="grid grid--half-gutters">
            <div class="grid__item">
                <label class="main-txt-title" for="ContactFormOverall"><strong>Type:</strong></label>
                <input type="radio" class="main-txt-content" name="arrangement" id="arrangementtype1" value="Bouquet"> Bouquet
                <input type="radio" class="main-txt-content" name="arrangement" id="arrangementtype2" value="Box"> Box
                <input type="radio" class="main-txt-content" name="arrangement" id="arrangementtype3" value="Custom"> Custom
              </div>
        </div>
        
        
        <div class="grid grid--half-gutters">
            <div class="grid__item">
              <label class="main-txt-title" for="ContactFormOverall"><strong>Message to be included on delivery:</strong></label>
                <textarea rows="5" id="ContactFormOverall" class="main-txt-content" name="contact[overall_style_of_wedding]"></textarea>
                <span class="main-txt-content">Characters Remaining: 250</span>
            </div>
        </div>
      
        <hr>
      
        <div class="grid grid--half-gutters">
      <div class="grid__item">
          <h2 class="main-txt-title main-form-title">Additional Information:</h2>
        </div>
      </div>
        
        <div class="grid grid--half-gutters">
            <div class="grid__item">
              <label class="main-txt-title" for="ContactFormOverall"><strong>Anything else we need to know:</strong></label>
              <p>Including: Additional delivery notes, custom arrangement information, flower preferences, questions</p>
                <textarea rows="4" id="ContactFormOverall" class="main-txt-content" name="contact[overall_style_of_wedding]"></textarea>
                <span class="main-txt-content">Characters Remaining: 250</span>
            </div>
        </div>
        
        <input type="submit" class="btn main-btn main-txt-heading" value="Send">
     </form>
    </div>
  </div>      
      
      
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>
 
 
 
Any help you can offer me in styling this would be greatly appreciated,

Ed

 

 

 

 

 

Any help you can give would be greatly appreciated. 

0 Likes