Question

I have input field where i am rendering selected full Names with semicolon separated, but i want to expand functionality it terms of looks and feel and add styling to these selected items so it can readable. I would like to add background-color to each name and want to show as separate box for each. As i understand we can not add any styling to input element but is there anyway to accomplish this requirement

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

inputFieldData

Mikel, Kem C.; Mike, Tiyane Q.

Answer 1

You can style input elements just as you can style divs.

For example:
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;
}

Here is a JS Fiddle: https://jsfiddle.net/k45xamq2/

In the above example I have made the background transparent and removed the border. Then added a border of my liking to the bottom only. I updated the color of the text as well. You can do so much more, just got to do a little bit of research.

How to style input selected items?

1 个答案: