Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here are 3 solutions:</p> <h2>Solution #1 - appearance: none - with ie10-11 workaround (<a href="http://codepen.io/danield770/pen/bgJOyV?editors=1100" rel="noreferrer">Demo</a>)</h2> <p>To hide the default arrow set <code>appearance: none</code> on the select element, then add your own custom arrow with <code>background-image</code></p> <pre><code>select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* remove default arrow */ background-image: url(...); /* add custom arrow */ } </code></pre> <p><strong>Browser Support:</strong></p> <p><code>appearance: none</code> has very good browser support (<a href="http://caniuse.com/#feat=css-appearance" rel="noreferrer">caniuse</a>) - except for ie11- and firefox 34-</p> <p>We can improve this technique and add support for ie10 and ie11 by adding</p> <pre><code>select::-ms-expand { display: none; /* hide the default arrow in ie10 and ie11 */ } </code></pre> <p>If ie9 is a concern - we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky ie9 selector to at least undo our custom arrow - leaving the default select arrow intact.</p> <pre><code>/* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background-image:none\9; padding: 5px\9; } } </code></pre> <h2>All together:</h2> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>select { margin: 50px; width: 150px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee; } /* CAUTION: IE hackery ahead */ select::-ms-expand { display: none; /* remove default arrow in IE 10 and 11 */ } /* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background:none\9; padding: 5px\9; } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt; &lt;option&gt;Apples&lt;/option&gt; &lt;option selected&gt;Pineapples&lt;/option&gt; &lt;option&gt;Chocklate&lt;/option&gt; &lt;option&gt;Pancakes&lt;/option&gt; &lt;/select&gt;</code></pre> </div> </div> </p> <p>This solution is easy and has good browser support - it should generally suffice.</p> <hr> <p>If browser support for ie9- and firefox 34- is necessary then keep reading... </p> <h2>Solution #2 Truncate the select element to hide the default arrow (<a href="http://jsfiddle.net/danield770/YvCHW/4246/" rel="noreferrer">Demo</a>)</h2> <p><a href="http://bavotasan.com/2011/style-select-box-using-only-css/" rel="noreferrer">(Read more here)</a></p> <p>Wrap the <code>select</code> element in a div with a <em>fixed width</em> and <code>overflow:hidden</code>.</p> <p>Then give the <code>select</code> element a width of about <em>20 pixels greater than the div</em>.</p> <p>The result is that the default drop-down arrow of the <code>select</code> element will be hidden (due to the <code>overflow:hidden</code> on the container), and you can place any background image you want on the right-hand-side of the div.</p> <p>The <strong>advantage</strong> of this approach is that it is cross-browser (Internet&nbsp;Explorer&nbsp;8 and later, <a href="http://en.wikipedia.org/wiki/WebKit" rel="noreferrer">WebKit</a>, and <a href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29" rel="noreferrer">Gecko</a>). However, the <strong>disadvantage</strong> of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).</p> <p><img src="https://i.stack.imgur.com/Wyf6w.png" alt="enter image description here"></p> <p>[It should be noted, however, that if the custom select element is necessary only for <strong>MOBILE</strong> devices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.styled select { background: transparent; width: 150px; font-size: 16px; border: 1px solid #ccc; height: 34px; } .styled { margin: 50px; width: 120px; height: 34px; border: 1px solid #111; border-radius: 3px; overflow: hidden; background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="styled"&gt; &lt;select&gt; &lt;option&gt;Pineapples&lt;/option&gt; &lt;option selected&gt;Apples&lt;/option&gt; &lt;option&gt;Chocklate&lt;/option&gt; &lt;option&gt;Pancakes&lt;/option&gt; &lt;/select&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <hr> <p>If the custom arrow is necessary on Firefox - prior to <a href="https://developer.mozilla.org/en-US/Firefox/Releases/35" rel="noreferrer">Version 35</a> - but you don't need to support old versions of IE - then keep reading...</p> <h2>Solution #3 - Use the <code>pointer-events</code> property (<a href="http://jsfiddle.net/danield770/sNwrs/2101/" rel="noreferrer">Demo</a>)</h2> <p><a href="http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/" rel="noreferrer">(Read more here)</a></p> <p>The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.</p> <p><strong>Advantage:</strong> Works well in WebKit and Gecko. It looks good too (no jutting out <code>option</code> elements)</p> <p><strong>Disadvantage:</strong> Internet&nbsp;Explorer (IE10 and down) doesn't support <code>pointer-events</code>, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!</p> <p>However, with this method you can use Modernizer or conditional comments to make Internet&nbsp;Explorer revert to the standard built in arrow.</p> <p><strong>NB:</strong> Being that Internet&nbsp;Explorer 10 doesn't support <code>conditional comments</code> anymore: If you want to use this approach, you should probably use <strong>Modernizr</strong>. However, it is still possible to exclude the pointer-events CSS from Internet&nbsp;Explorer 10 with a CSS hack described <a href="https://stackoverflow.com/a/14916454/703717">here</a>.</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.notIE { position: relative; display: inline-block; } select { display: inline-block; height: 30px; width: 150px; outline: none; color: #74646e; border: 1px solid #C8BFC4; border-radius: 4px; box-shadow: inset 1px 1px 2px #ddd8dc; background: #fff; } /* Select arrow styling */ .notIE .fancyArrow { width: 23px; height: 28px; position: absolute; display: inline-block; top: 1px; right: 3px; background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff; pointer-events: none; } /*target Internet Explorer 9 and Internet Explorer 10:*/ @media screen and (min-width: 0\0) { .notIE .fancyArrow { display: none; } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--[if !IE]&gt; --&gt; &lt;div class="notIE"&gt; &lt;!-- &lt;![endif]--&gt; &lt;span class="fancyArrow"&gt;&lt;/span&gt; &lt;select&gt; &lt;option&gt;Apples&lt;/option&gt; &lt;option selected&gt;Pineapples&lt;/option&gt; &lt;option&gt;Chocklate&lt;/option&gt; &lt;option&gt;Pancakes&lt;/option&gt; &lt;/select&gt; &lt;!--[if !IE]&gt; --&gt; &lt;/div&gt; &lt;!-- &lt;![endif]--&gt;</code></pre> </div> </div> </p>
    singulars
    1. This table or related slice is empty.
    1. POHow to style a <select> dropdown with only CSS?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMicros
    1. USDanield
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to style a <select> dropdown with only CSS?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhich is best according to you from these 2 methods?
      singulars
      1. PO
      1. USJitendra Vyas
    2. COIt depends on the design requirements. If you're ok with the drop-down jutting out - then that's the best because it's cross browser (IMO allbrowsers + IE8+ could be considered cross-browser) but I think to many - this won't do. So actually in my statement above I meant that aprroach #2 was the best.
      singulars
      1. PO
      1. USDanield
    3. COAlso, the fiddle which I posted uses approach #2 with conditional statements to allow IE to use its default arrow.
      singulars
      1. PO
      1. USDanield
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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