Note that there are some explanatory texts on larger screens.

plurals
  1. POFull width input buttons on same line
    primarykey
    data
    text
    <p>I'm trying to make two input buttons (yes/no) display on the same line with maximum width for both. I want the width of the buttons to scale down in size as the browser window size decreases.</p> <p><a href="http://jsfiddle.net/jasonniebauer/grQGP/1/" rel="nofollow">http://jsfiddle.net/jasonniebauer/grQGP/1/</a></p> <pre><code>&lt;div id="merchant_radio6"&gt; &lt;p&gt; Ever accepted credit cards before? &lt;/p&gt; &lt;div&gt; &lt;input type="radio" id="yes" name="accept_cc"/&gt; &lt;label for="yes"&gt; Yes &lt;/label&gt; &lt;input type="radio" id="no" name="accept_cc"/&gt; &lt;label for="no"&gt; No &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; #merchant_radio6 input[type="radio"], #merchant_radio7 input[type="radio"] { display: none; } #merchant_radio6 input[type="radio"] + label, #merchant_radio7 input[type="radio"] + label { box-sizing:border-box; padding: 1rem 3rem 1rem 3rem; width: 100%; display: inline-block; color: #BDC3C7; background-color: #F2F2F2; text-align: center; vertical-align: middle; cursor: pointer; border-radius: 3px; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; -webkit-transition-property: border, color, background-color; -webkit-transition-duration: 0.25s, 0.25s, 0.25s; -webkit-transition-timing-function: linear, linear, linear; -webkit-transition-delay: initial, initial, initial; transition: border .25s linear, color .25s linear, background-color .25s linear; transition-property: border, color, background-color; transition-duration: 0.25s, 0.25s, 0.25s; transition-timing-function: linear, linear, linear; transition-delay: initial, initial, initial; } #merchant_radio6 input[type="radio"] + label:nth-of-type(2), #merchant_radio7 input[type="radio"] + label:nth-of-type(2) { margin-left: 1rem; } #merchant_radio6 input[type="radio"]:checked + label, #merchant_radio7 input[type="radio"]:checked + label { background-color: #3498DB; color: #FFFFFF; outline: 0; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload