Databases
StackOverflow2013
Postsdbo
POPure CSS Select Menu/Dropdown: How to make custom right arrow?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPure CSS Select Menu/Dropdown: How to make custom right arrow?
    text
    copied!<p>I am using a custom select/dropdown menu per the solution here: <a href="https://stackoverflow.com/a/10190884/1318135">https://stackoverflow.com/a/10190884/1318135</a></p> <p>This functions great, except that the 'arrow' on the right does not look very good. I would like it to be wider, similar in appearance to the up/down vote arrows on this site (look left).</p> <p>Attempted the following, open to a solution using any of these or other options:<br> -Integrating an image into HTML (could not get it to show in foreground v. dropdown)<br> -Location a font with a wider arrow for the character (could not find one)<br> -Setting background-image property in CSS (displayed default down arrow instead)</p> <p><a href="http://jsfiddle.net/XxkSC/553/" rel="nofollow noreferrer">http://jsfiddle.net/XxkSC/553/</a></p> <p>HTML:</p> <pre><code>&lt;label class="custom-select"&gt; &lt;select&gt; &lt;option&gt;Sushi&lt;/option&gt; &lt;option&gt;Blue cheese with crackers&lt;/option&gt; &lt;option&gt;Steak&lt;/option&gt; &lt;option&gt;Other&lt;/option&gt; &lt;/select&gt; &lt;/label&gt; </code></pre> <p>CSS:</p> <pre><code>label.custom-select { position: relative; display: inline-block; } .custom-select select { display: inline-block; padding: 4px 3px 3px 5px; margin: 0; font: inherit; outline:none; /* remove focus ring from Webkit */ line-height: 1.2; background: #000; color:white; border:0; } /* Select arrow styling */ .custom-select:after { content: "▼"; /* Current arrow I would like to change */ position: absolute; top: 0; right: 0; bottom: 0; font-size: 60%; line-height: 30px; padding: 0 7px; background: #000; color: white; } .no-pointer-events .custom-select:after { content: none; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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