✍ 📁 🙈 🙉 🙊 : html select

<t><<?>select> dropdown menu 用來建立下拉式選單</t>
<pre> 讓使用者可以從一堆選項中選擇出一個或多個選項。
 <<?>select> 本身做為選單的容器，在裡面用 <<?>option> 標籤來建立個別選項。

<table class="dataintable">
<tbody><tr><tr><td colspan="2"><t>select</t> 標籤上可以用的屬性 attributes : </td></tr><tr>
<td>autofocus</td><td>規定在頁面加載後文本區域自動獲得焦點。</td></tr>

<tr><td>disabled</td><td>規定禁用該下拉列表。</td></tr>

<tr><td>form</td><td>規定文本區域所屬的一個或多個表單。</td></tr>

<tr><td>multiple</td><td>規定可選擇多個選項。</td></tr>

<tr><td>name</td><td>規定下拉列表的名稱。</td></tr>

<tr><td>required</td><td>規定文本區域是必填的。</td></tr>

<tr><td>size</td><td>規定下拉列表中可見選項的數目。</td></tr>
</tbody></table>

<table class="dataintable">
<tbody><tr><td colspan="2"><t>option</t> 標籤上可以用的屬性 attributes :</td></tr><tr>
<tr><td>value</td><td>定義送往服務器的選項值。</td></tr>

<td>disabled</td><td>規定此選項應在首次加載時被禁用。</td></tr>

<td>label</td><td>定義當使用 時所使用的標注。</td></tr>

<td>selected</td><td>規定選項（在首次顯示在列表中時）表現為選中狀態。</td>
</tr>

</tbody></table>

</pre>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<t><<?>select> 用來建立下拉式選單 例子 </t>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
第二項 <r>selected</r> 會默認選中。</th></tr></tr>
<td width="75%"><pre><<?>select>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" <r>selected</r> >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select>
       <option value="A">select 1</option>
       <option value="B" selected >select 2</option>
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>multiple</r> 下拉列表中可進行多個選擇</th></tr>
<td width="75%"><pre><<?>select <r>multiple</r> >
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select multiple >
       <option value="A" >select 1</option>
       <option value="B" >select 2</option>
       <option value="C" >select 3</option>
       <option value="D" >select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>size</r> 用於指定下拉列表中的可見選項數。它的默認值為4。
</th></tr><tr>
<td width="75%"><pre><<?>select <r> size="2"</r> >
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
   <<?>option value="E" >select 5<<?>/option>
 <<?>/select></pre>
</td><td>
    <select size="2">
       <option value="A" >select 1</option>
       <option value="B" >select 2</option>
       <option value="C" >select 3</option>
       <option value="D" >select 4</option>
       <option value="E" >select 5</option>
    </select>
</td></tr></tbody></table>

<t><<?>select> 用來建立下拉式選單 例子 </t>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r><<?>optgroup label="1 to 2"></r> 相關標簽</th></tr></tr>
<td width="75%"><pre><<?>select>
   <<?>option style="display:none;" >請選擇<<?>/option>
           <r><<?>optgroup label="1 to 2"></r>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
           <r><<?>optgroup label="3 to 4"></r>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select>
       <option style="display:none;">請選擇</option>
           <optgroup label="1 to 2">
       <option value="A">select 1</option>
       <option value="B">select 2</option>
           <optgroup label="3 to 4">
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>style="display:none"</r> option不能選擇</th></tr></tr>
<td width="75%"><pre><<?>select>
   <<?>option <r>style="display:none;"</r> >請選擇<<?>/option>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select>
       <option style="display:none;">請選擇</option>
       <option value="A">select 1</option>
       <option value="B">select 2</option>
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<table width="95%" border="1" ><tbody>
<tr><th colspan="2" align="center">
<r>onchange="this.selectedIndex=0"</r> 擇後返回原位 </th></tr></tr>
<td width="75%"><pre><<?>select <r>onchange="this.selectedIndex=0"</r> >
   <<?>option style="display:none;" >請選擇<<?>/option>
   <<?>option value="A" >select 1<<?>/option>
   <<?>option value="B" >select 2<<?>/option>
   <<?>option value="C" >select 3<<?>/option>
   <<?>option value="D" >select 4<<?>/option>
 <<?>/select></pre>
</td><td>
    <select onchange="this.selectedIndex=0">
       <option style="display:none;">請選擇</option>
       <option value="A">select 1</option>
       <option value="B">select 2</option>
       <option value="C">select 3</option>
       <option value="D">select 4</option>
    </select>
</td></tr></tbody></table>

<div id="S1" onclick="DPcss(this)">
<label class="S1">
      <select  >
        <option>select 1</option>
        <option>Coffee</option>
        <option>Tea</option>
        <option>Juice</option>
        <optionCocktail</option>
      </select>
</label>
<style>
.S1 select { width: 140px; height: 35px;
             padding: 4px; color:indigo;
             font-size:20px; 
             border-radius: 4px;
             box-shadow: 2px 2px 8px #999;
             background: #eee;
             border: none;
             outline: none;
             display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;    }

.S1 select:hover {background: #efe;}
.S1 select Option { color:blue; font-size:18px; }
.S1  {  position: relative; }

.S1::after { content: '< >';
                  font-size:20px;
                  color: #666;
                  background: none;
                  -webkit-transform: rotate(90deg);
                  -moz-transform: rotate(90deg);
                  transform: rotate(90deg);
                  right: 8px;
                  top: -6px;
                  padding: 0 0 2px;
                  border-bottom: 1px solid #ddd;
                  position: absolute;
                  pointer-events: none; }

</style>
</div >

<div id="S2" onclick="DPcss(this)" >
<label class="S2">
     <select>
    <option value="0" style="display:none;" >select 2</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
      </select>
</label>
<style>
.S2 select { width: 200px; height: 40px;
             padding: 4px; color: white;
             font-size:20px; 
             border-radius: 4px;
             box-shadow: 2px 2px 8px #999;
             background:  #2c3e50;
             border: none;
             outline: none;
             display: inline-block;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
             cursor: pointer;   }

.S2 select:hover {background: #2c5a60;}
.S2 select Option { color:blue; font-size:18px; }
.S2  { position: relative; }

.S2:after { content: '\25BC';
                  font-size:20px; 
                  color:sandybrown;
                  background: none;
                //-webkit-transform: rotate(90deg);
                //-moz-transform: rotate(90deg);
                //transform: rotate(90deg);
                   right: 8px;
                   top: -5px;
                 //padding: 0 0 2px;
                 //border-bottom: 1px solid #ddd;
                   position: absolute;
                   pointer-events: none; }

.S2 select Option { color:red; font-size:18px; }
</style>
</div >

<div id="S3" onclick="DPcss(this)" >
<label class="S3" >
     <select>
    <option value="0" style="display:none;" >select 3</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
      </select>
</label>

.S3 select:hover {background: #D3D3D3;}
.S3 select Option { color:blue; font-size:18px; }
.S3    {  position: relative; }

.S3:after { content: '☝';
                  font-size:26px;
                  color: #666;
                  background: none;
                  -webkit-transform: rotate(-90deg);
                  -moz-transform: rotate(-90deg);
                  transform: rotate(-90deg);
                  right: 10px;
                  top: -10px;
                  padding: 0 0 2px;
                  border-bottom: 1px solid #ddd;
                  position: absolute;
                  pointer-events: none; }

</style>
</div >
</div>
<br>HTML CSS
  <div id="DP"></div>

function DPcss(x){
Textcss.value = x.innerHTML ;
//alert(x.innerHTML  )
}

DPcss(S1)

</script>

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

html select

沒有留言:

張貼留言

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單