<div>
    <!--因为less打包后无法成功加载到项目，为了开发进度，只能写在html中-->
    <style>
        .for-fake-input{
            width: 100%;
            margin: 0;
            height: inherit;
            border: 0;
            outline: none;
            font-size: inherit;
            padding: 0;
        }

        .select-simulator{
            height: inherit;
            border:0;
            width: 100%;
            font-size: inherit;
            border-radius: 3px;
            background-color: #fff;
            background-image: none;
            position: relative;
            overflow: hidden;
        }

        .select-simulator-option-menu{
            border: 1px solid #dadada;
            position: absolute;
            max-height: 15rem;
            overflow: auto;
            z-index: 11;
            left: 0;
            top: 0;
            width: 0;
            background-color: white;
            font-size: 1rem;
            border-radius: 5px;
            box-shadow: 0 2px 2px rgba(210,210,210,0.7);
            border-top: 1px solid #dedede;
            border-bottom: 1px solid #b7b7b7;
        }
        .select-simulator-option-menu ul{
            padding:0;
        }
        .select-simulator-option-menu ul li{
            padding:0 8px;
            list-style: none;
            color: #000;
            font-size: 13px;
            line-height: 1;
        }
        .select-simulator-option-menu ul li:hover{
            background-color: #e7e8e0;
        }
        .select-simulator-option-menu ul li:nth-child(odd){
            background-color: #F2F2F2;;
        }
        .select-simulator-option-menu ul li > label{
            margin:0;
            padding: 8px 0;
        }

        .input-reset-button {
            position: absolute;
            margin: 0;
            border: 0;
            background: #fff;
            top: 0;
            right: 0;
            color: #969696;
            overflow: hidden;
            outline: none;
        }
        .input-arrow-drop-button {
            position: absolute;
            margin: 0;
            border: 0;
            background: #fff;
            top: 0;
            right: 0;
            color: #969696;
            overflow: hidden;
            outline: none;
        }
        .input-arrow-drop-button:before {
            content: "▾";
            height: inherit;
            width: inherit;
            position: relative;
            background: inherit;
        }
        .input-reset-button:after {
            content: "x";
            height: inherit;
            width: inherit;
            position: relative;
            background: inherit;
        }
        .select-simulator-option-name{
            float:left;
        }
        .select-simulator-option-check-icon{
            float:right;
            color:#0db4ff;
        }
    </style>
    <div class="select-simulator">
        <input class="for-fake-input"
               ng-click="showMenu();"
               placeholder="请选择"
               title="{{selected}}"
               readonly
               ng-model="selected">
        <button type="button" class="input-arrow-drop-button"
                ng-click="showMenu()">
        </button>
        <button type="button" class="input-reset-button"
                ng-click="clearInput()"
                ng-mouseleave="activeWatcher()"
                ng-mouseenter="closeWatcher()"
                ng-hide="!showOptionMenu && !selected">
        </button>
    </div>

    <div ng-show="showOptionMenu"
         ng-mouseleave="activeWatcher()"
         ng-mouseenter="closeWatcher()"
         class="select-simulator-option-menu">
        <ul>
            <li ng-repeat="value in optionValues track by $index">
                <label style="width: 100%;" ng-click="checksOption()">
                    <input type="{{optionType}}"
                           name="simulatorOptionMenu"
                           value="{{value}}" ng-hide="true"
                           ng-checked="selected.indexOf(optionValues[$index]) > -1"
                           data-key="{{optionKeys[$index]}}"/>
                    <span class="select-simulator-option-name">{{value}}</span>
                    <i ng-if="selected.indexOf(optionValues[$index]) > -1" class="fa fa-check select-simulator-option-check-icon"></i>
                </label>
            </li>
        </ul>
    </div>
</div>