title: how to create a Jquery Mobile button without corners from an input element?
body: <p>I'm building controlgroups out of Jquery Mobile inputs like so:</p>
  
  <pre><code>&lt;div data-role="controlgroup"&gt;
      &lt;span class="ui-li ui-li-divider ui-bar-a ui-corner-top"&gt;&lt;span class="ui-divider-text"&gt;Divider&lt;/span&gt;&lt;/span&gt;
      &lt;input type="button" data-icon="arrow-r" data-iconpos="right" value="text" /&gt;
      ....
  &lt;/div&gt;
  </code></pre>
  
  <p>While this works nicely, I'm often ending up with the input elements also getting corners. I tried overriding JQM by adding <em>data-corners="false"</em> to the input</p>
  
  <pre><code>&lt;input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" /&gt;
  </code></pre>
  
  <p>but since this goes on the div.ui-btn wrapping the input element, it doesn't work.</p>
  
  <p><strong>Question:</strong><br>
  Is there a way to tell JQM to not put corner on an element? I can't add classes to the input element (like <strong>ui-corner-I-don't-need</strong>, because corners will be on wrappring <strong>ui-btn</strong> and <strong>ui-btn-inner</strong>, which I can only access by Jquery (don't want).</p>
  
  <p>Any other ideas?</p>
  
  <p>Thanks for inputs!</p>