html - 选择下拉列表不显示所选元素

Question

我创建了一个选择，它会下拉以显示不同类型的行间距的选项。但是，我希望选择仅显示选定的行间距图标，而不是显示我当前选择的行间距样式。如果您查看下面选择的图像，我会在所选图标上方显示“1.0”。我想更改 CSS 或 HTML 以使“1.0”(所选选项)消失。谢谢!

HTML:

 <div class = "lineHeight">
                                        <select id="lineHeightSelect" onchange="changeStyle('line-height', this.value)">

                                            <option value="20px">1.0</option>
                                            <option value="35px">1.5</option>
                                            <option value="50px">2.0</option>
                                        </select>
                                    </div>

CSS:

.lineHeight {
    border: 1px solid #ccc;
    width: 35px;
    height: 35px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #ffffff;
    background-image: url( 'https://cdn0.iconfinder.com/data/icons/pixel-perfect-at-24px-volume-1/24/line-height-512.png' );
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
}

.lineHeight #lineHeightSelect {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

#lineHeightSelect option:checked {
    display: none;
}

#lineHeightSelect select:focus {
    outline: none;
}

Javascript:

function changeStyle( property, value ) {
        if ( window.getSelection().rangeCount ) {
            var range = window.getSelection().getRangeAt( 0 ),
                    contents = range.extractContents(),
                    span = document.createElement( 'span' );

            span.style[ property ] = value;
            span.appendChild( contents );
            range.insertNode( span );
            window.getSelection().removeAllRanges()
        }
    }

Answer 1

我想说的是添加以下内容:

HTML

<option value="20px" onclick="twenty-hide() id="twenty">1.0</option>

JavaScript

function twenty-hide() {
    document.getElementById('twenty').style.visibility = 'hidden';
}

这有望解决您的问题。首先将其应用于一个，然后如果它有效，则添加其他。如果没有(我仍在学习 JS)，请毫不犹豫地告诉我。