CODEWITHSUNDEEP
javascriptjqueryhtmlcss
H.Sdq
H.Sdq

Reputation: 857

hide a transparent text on input double click

I don't want the user to see the text entered in an input, I have already used color: transparent and the text is hidden but when the user double clicks on the input, the text becomes visible! How can I hide it when input is selected via double click. thanks in advance. 

#loginCard{
  color: transparent;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
    <input type="text" autocomplete="off" id="loginCard">
</body>
</html>

Upvotes: 1

Views: 222

Answers (6)

Ashiqur Rahman
Ashiqur Rahman

Reputation: 424

Use this code in CSS to change the text marking highlight color

N.B: You can also use transparent in color. I use white as the background is white. But using transparent will be wiser. 

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}


::selection {
  background: #fff; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #fff; /* Gecko Browsers */
}

.sample {
  color: #fff;
}
<input type="text" class="sample" />

Upvotes: 1

Kasunjith Bimal
Kasunjith Bimal

Reputation: 188

Html

<input type="password" id="password" >

Jquery

$(document).ready(function(){

    $('#password').dblclick(function(){
     $('#password').attr("type","text");
    })

});

Upvotes: 0

Captain
Captain

Reputation: 168

Simply add

::selection {
  background: transparent;
}

For firefox:

::-moz-selection {
  background: transparent;
}

Upvotes: 0

sol
sol

Reputation: 22949

You can use ::selection set to transparent

Support

input {
  color: transparent;
}

input::selection {
 color: transparent;
}
<input>

Upvotes: 0

nirmoo
nirmoo

Reputation: 23

input::selection {
    color: transparent;
    background: transparent;
}

would make it transparent

Upvotes: 0

Ciccio
Ciccio

Reputation: 468

I don't know why you want to do this but you can use css:

input, textarea { 
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                              supported by Chrome and Opera */

}

Upvotes: 0

Related Questions