實現CSS - 在DOM中沒有名稱也沒有適當的值

Question

我很難理解如何實現CSS <select>標籤的工作原理。

在常規的HTML選擇標記中，您需要插入一個name=""屬性，並且對於每個選項，value=""屬性（在實現CSS時似乎都缺失）。

此代碼：

<div class="input-field col s12"> 
    <select> 
    <option value="" disabled selected>Choose your option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <label>Materialize Select</label> 
</div> 

使這個在DOM：

<div class="input-field col s12 m6"> 
    <div class="select-wrapper"><span class="caret">▼</span> 
    <input class="select-dropdown" readonly="true" data-activates="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" value="Choose your option" type="text"> 
    <ul style="width: 296px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" class="dropdown-content select-dropdown"> 
     <li class="disabled"><span>Choose your option</span></li><li class="active selected"><span>Option 1</span></li><li class=""><span>Option 2</span></li> 
     <li class=""><span>Option 3</span></li> 
    </ul> 
    <select class="initialized"> 
      <option value="" disabled="" selected="">Choose your option</option> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
    </select> 
    </div> 
    <label>Materialize Select</label> 
</div> 

問題我有：

1. 在哪裏，我怎麼爲選擇元素設置的名稱（在呈現的input元素中相應地表示）？
2. 這些值是列表中顯示的文本。我希望有不同的值比顯示的字符串，e.g：

<option value="1">regular style</option> <option value="2">bold style</option> <option value="3">italic style</option>

感謝所有提前:)