Javascript 如何设置输入选定项的样式？

我有一个输入字段，在这里我用分号分隔显示选定的全名，但我想扩展它的功能，包括外观和感觉，并为这些选定的项目添加样式，使其可读。我想为每个名称添加背景色，并希望为每个名称显示为单独的框。据我所知，我们不能向输入元素添加任何样式，但是否有任何方法可以满足此要求

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)" />

---

可以设置输入元素的样式，就像设置div的样式一样

例如：
HTML

这是一把JS小提琴：

---

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

谢谢每个名字的背景色如何，我在上面的css中应用了背景色，但这就是为输入元素设置背景色，有没有办法也为这些名字设置背景？@hussain你能给我一个你尝试过的js小提琴吗？我不明白你指的是什么背景，对不起，我没有访问JSFIDLE的权限，输入字段中每个全名的背景颜色让我们从上面的问题

Mikel开始说，Kem C

我想给这种背景颜色为蓝色和字体颜色为白色的值框添加样式，这将应用于所有值，以便可以单独读取全名。@hussain所以您试图对输入元素进行部分着色，我认为这是不可能的。你可以尝试使用渐变。但是你必须知道每个名字的长度才能让它起作用。

Mikel, Kem C.; Mike, Tiyane Q.

<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">

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;
}