CSS: Input border when selected

CSS: Input border when selected

  

Hi,

I am trying to remove the block inside of the input field when the input is selected. Does anyone how to remove the border when the input field is selected in CSS? My wish is to have it as it is not selected, but of course the cursor should be seen when selected. I tried a lot in CSS, but nothing worked.

Not selected:

Selected:

Thanks in advance! 


Hi Martijn de Pijper,

Can you give this code as a try 

As i was changing the border color of the input widget on focus using the below code.

And i think you too want to remove the border, so i have replaced the border-width to 0px. 

SyntaxEditor Code Snippet

 input[data-input]:focus{
    border-width:0px;
    color: transparent; 
}

Thanks,

Kirit


Hi Kirit,

Thanks for your quick reply. This one I tried as well. Unfortunately it is working a bit TOO good :P When the input is selected nothing is visible anymore. 


Solution

Hi Kirit,

I just tried something else. I tried your code and tweeked it a bit and it seems to work perfectly! 

SyntaxEditor Code Snippet

 input[data-input]:focus{
    border-width:0px;
    border: none;
}

So now the border of the input is gone and the cursor and input are still visible. 

Regards,

Solution

Hi Martijn de Pijper,

I didn't analysed what exactly you were in need and hence suggested the syntax and modification was necessary.

Anyway you were able to resolve the issue.

Mission accomplished.