How to disable blue border line in IonInput fields?

Question

I want to disable the blu border line in IonInput of IonicV2.

I try to add some CSS from the net but id doesn't work

<ionlist 
    id="list" 
    nolines 
    style="margin-top:150px;margin-bottom:15px" 
    visible
>
    <ionitem 
        id="usernameItem" 
        detail="none" 
        wraptext="false" 
        sticky="false" 
        type="default" 
        style="display:flex;position:relative;top:0px;bottom:0px;border-top:1px none rgb(222, 222, 222);border-bottom:1px none rgb(0, 0, 0);height:68px"
    >
        <ioninput 
            id="username" 
            style="display:flex;border-bottom:1px solid rgb(225, 39, 39)" 
            label="Username" 
            labelposition="floating" 
            type="username"
        ></ioninput>
    </ionitem>
    <ionitem 
        id="passwordItem" 
        type="default" 
        style="border-top:1px none rgb(0, 0, 0);border-bottom:1px none rgb(222, 222, 222)" 
        detail="none" 
        wraptext="false" 
        sticky="false"
    >
        <ioninput 
            id="password" 
            style="display:flex;border-bottom:1px solid rgb(225, 39, 39)" 
            labelposition="floating" 
            label="Password" 
            type="password"
        ></ioninput>
    </ionitem>
</ionlist>

Actually, the second ionInput field doesn't show the blue border line but I don't know why

Perhaps you are indicating on the outline of the element? See https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome — Nick Van Loocke, Jul 11 '19 at 10:00
Regard, for my understanding, ion also generates HTML, so there is not different between an 'ioninput' or the html input? — Arno Tenkink, Jul 11 '19 at 12:40

score 0 · Answer 1 · answered Jul 11 '19 at 14:02

0

I would try to remove the outline of the ioninput. Just add outline: none to the certain element (in this case ioninput).

answered Jul 11 '19 at 14:02

Nils Walker

159
1
1
9

I try but it doesn't work, then i choose to use bootstrap element – regard Jul 15 '19 at 16:23

How to disable blue border line in IonInput fields?

1 Answers1