javascript - 如何设置输入选定元素的样式？

Question

我有一个输入字段，我在其中呈现用分号分隔的选定全名，但我想扩展它的外观和感觉方面的功能，并为这些选定的元素添加样式，以便它可以阅读。我想为每个名称添加背景颜色，并希望为每个名称显示为单独的框。据我了解，我们无法向输入元素添加任何样式，但无论如何都可以满足此要求

main.html

<input type="text" class="form-control mousedwncall disableX"
        id="cntrlOwner" required ng-model="controlOwnerObj.workerName"
        name="cntrlOwner"
        ng-disabled="editCtrlFreezeField || !CONTROL_EDIT"
        ng-readOnly="editCtrlFreezeField || !CONTROL_EDIT" ng-click="opencntrlOwner()"
        placeholder="Control Owner(s)" />

输入字段数据

Mikel, Kem C.; Mike, Tiyane Q.

Answer 1

您可以像设置 div 一样设置输入元素的样式。

例如:
HTML

<input value="My styled Input" id="MyInput" name="MyInput" placeholder="Username" type="text">
<br />
<br />
<input value="My not so styled Input" placeholder="Username" type="text">

CSS:

input[type=text]#MyInput {
    background: transparent;
    border: 0 none;
    border-bottom: 2px solid #333;
    height: 60px;
    color: #FF6A00;
    width: 100%;
    font-size: 28px;
    font-weight: 300;
    font-stretch: condensed;
    width: 300px;
}

这是一个 JS fiddle : https://jsfiddle.net/k45xamq2/

在上面的示例中，我将背景设为透明并移除了边框。然后只在底部添加我喜欢的边框。我也更新了文本的颜色。您可以做更多的事情，只需做一点研究。