Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Just stumbled across this question, here's what works in FireFox &amp; Chrome (at least)</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt; select:invalid { color: gray; } &lt;/style&gt; &lt;form&gt; &lt;select required&gt; &lt;option value="" disabled selected hidden&gt;Please Choose...&lt;/option&gt; &lt;option value="0"&gt;Open when powered (most valves do this)&lt;/option&gt; &lt;option value="1"&gt;Closed when powered, auto-opens when power is cut&lt;/option&gt; &lt;/select&gt; &lt;/form&gt;</code></pre> </div> </div> </p> <p>The Disabled option stops the <code>&lt;option&gt;</code> being selected with both mouse and keyboard, whereas just using <code>'display:none'</code> allows the user to still select via the keyboard arrows. The <code>'display:none'</code> style just makes the list box look 'nice'.</p> <p>Note: Using an empty <code>value</code> attribute on the "placeholder" option allows validation (required attribute) to work around having the "placeholder", so if the option isn't changed but is required; the browser should prompt the user to choose an option from the list.</p> <p><strong>Update (July 2015):</strong></p> <p>This method is confirmed working in the following browsers:</p> <ul> <li>Google Chrome - v.43.0.2357.132</li> <li>Mozilla Firefox - v.39.0</li> <li>Safari - v.8.0.7 (Placeholder is visible in dropdown but is not selectable)</li> <li>Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)</li> <li>Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)</li> </ul> <p><strong>Update (October 2015):</strong></p> <p>Removed the <code>style="display: none"</code> in favour of HTML5 attribute <code>hidden</code> which has wide support. The <code>hidden</code> element has similar traits as <code>display: none</code> in Safari, IE, (Project Spartan needs checking) where the <code>option</code> is visible in dropdown but is not selectable.</p> <p><strong>Update (January 2016):</strong></p> <p>When the <code>select</code> element is <code>required</code> it allows use of the <code>:invalid</code> CSS pseudo-class which allows you to style the <code>select</code> element when in it's "placeholder" state. <code>:invalid</code> works here because of the empty value in the placeholder <code>option</code>.</p> <p>Once a value has been set the <code>:invalid</code> pseudo-class will be dropped. You can optionally also use <code>:valid</code> if you so wish.</p> <p>Most browsers support this pseudo-class. IE10+. This works best with custom styled <code>select</code> elements; In some cases i.e. ( Mac in Chrome / Safari) you'll need to change the default appearance of the <code>select</code> box so that certain styles display i.e. <code>background-color</code>, <code>color</code>. You can find some examples and more about compatibility at <a href="https://developer.mozilla.org/en/docs/Web/CSS/:invalid" rel="noreferrer">developer.mozilla.org</a>.</p> <p>Native element appearance Mac in Chrome:</p> <p><img src="https://i.stack.imgur.com/L6cVA.png" alt="Select box native Mac in Chrome"></p> <p>Using altered border element Mac in Chrome:</p> <p><img src="https://i.stack.imgur.com/OWMDi.png" alt="Altered select box Mac in Chrome"></p>
    singulars
    1. This table or related slice is empty.
    1. POHow do I make a placeholder for a 'select' box?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USWilliam Isted
    1. USWilliam Isted
    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. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    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. COThis works for me without the `style="display:none;` declaration. Shows "Please choose" on initial load, once the user clicks the dropdown, it can't be selected.
      singulars
      1. PO
      1. USjaacob
    2. CO@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.
      singulars
      1. PO
      1. USWilliam Isted
    3. COImportant to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.
      singulars
      1. PO
      1. USRobert Mark Bram
 

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