Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><a href="https://stackoverflow.com/a/9447243/282110">Kyle's solution</a> worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML. Adding a value of <code>selected</code> to the item we want to appear as a header forces it to show in the first place as a placeholder. Something like:</p> <pre><code>&lt;option selected disabled&gt;Choose here&lt;/option&gt; </code></pre> <p>The complete markup should be along these lines:</p> <pre><code>&lt;select&gt; &lt;option selected disabled&gt;Choose here&lt;/option&gt; &lt;option value="1"&gt;One&lt;/option&gt; &lt;option value="2"&gt;Two&lt;/option&gt; &lt;option value="3"&gt;Three&lt;/option&gt; &lt;option value="4"&gt;Four&lt;/option&gt; &lt;option value="5"&gt;Five&lt;/option&gt; &lt;/select&gt; </code></pre> <p>You can take a look at this <a href="http://jsfiddle.net/gleezer/Yfs4u/1/" rel="noreferrer">fiddle</a>, and here's the result:</p> <p><a href="https://i.stack.imgur.com/3dhZ9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3dhZ9.png" alt="enter image description here"></a></p> <p>If you <strong>do not</strong> want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the <code>hidden</code> attribute like so:</p> <pre><code>&lt;select&gt; &lt;option selected disabled hidden&gt;Choose here&lt;/option&gt; &lt;option value="1"&gt;One&lt;/option&gt; &lt;option value="2"&gt;Two&lt;/option&gt; &lt;option value="3"&gt;Three&lt;/option&gt; &lt;option value="4"&gt;Four&lt;/option&gt; &lt;option value="5"&gt;Five&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Check the <a href="http://jsfiddle.net/gleezer/pm7cefvg/1/" rel="noreferrer">fiddle here</a> and the screenshot below.</p> <p><a href="https://i.stack.imgur.com/mS9WE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mS9WE.png" alt="enter image description here"></a></p>
 

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