asked on

style sheet for input texts to show as images

Hi All,
Advance thanks!
i need help in displaying the input text box which shows text as image (like captcha text). I don't want to use recpatcha or any plugins, all need is stylesheet to make text box text to display as image which requires human eye to judge the letters!
<input class="InputField" autocomplete="off" type="Text" name="Question1" id="Question1" size="15" maxlength="10" onPaste="return false;"/>

Kind regards,
Pooja

Nicolas Lecanu

Hi poojasureshkumar,

You want to do something like that ?

<html>
<style>
    input{
        background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/7467-200.png) no-repeat;
        background-size: 25px;
        background-position: 2%;
    }
</style>
<input class="InputField" autocomplete="off" type="Text" name="Question1" id="Question1" size="15" maxlength="10" onPaste="return false;"/>
</html>
<script>
    $("#ShowCurrentPassword").click(function(){
        $('#Password').attr('type', 'text');
        setTimeout(function(){$('#Password').attr('type', 'password'); }, 900);
    });
</script>

Open in new window

Or you really want to display an image ?
I understand that you want to display an image into the input type" text", but a simple input type "image" will do that no ?
Or I miss something you need on your project ?

<input type="image" id="image" alt="Login" src="https://d30y9cdsu7xlg0.cloudfront.net/png/7467-200.png">

Open in new window

suresh pondicherry

ASKER

Hi Nicolas Lecanu,
I was trying to make my text to look like image..

document.getElementById("Question").style.color="#98A7A0";
document.getElementById("Question").style.background= "#D07B09"

I get text from backend and show it on text box.
i need the figures showing inside the text box to look like image...

Kind regards,
Pooja

Nicolas Lecanu

<input class="InputField" autocomplete="off" type="Text" name="Question1" id="Question" size="15" style="width:200;height:200;" maxlength="10" onPaste="return false;"/>
<script>
    document.getElementById("Question").style.color="#98A7A0";
    document.getElementById("Question").style.background = "#f3f3f3 url('https://d30y9cdsu7xlg0.cloudfront.net/png/7467-200.png') no-repeat right top";
</script>

Open in new window

Nicolas Lecanu

You can put maxlength="0" to enter nothing or simply disabled the input to only see the image.

<input class="InputField" autocomplete="off" type="Text" name="Question1" id="Question" maxlength="0" size="15" style="width:200;height:200;" maxlength="10" onPaste="return false;" disabled/>
<script>
    document.getElementById("Question").style.color="#98A7A0";
    document.getElementById("Question").style.background = "#f3f3f3 url('https://d30y9cdsu7xlg0.cloudfront.net/png/7467-200.png') no-repeat right top";
</script>

Open in new window

lenamtl

Hi,

I'm confused about your needs, could you elaborate?

If you need an input that is not an input but an image, so why don't just display the image, then another field for the answer?

If you are not trying to make a custom captcha please give a real example of what you are trying to do.

If you need this feature to prevent bot to use your form
I would use the latest Google invisible Recaptcha and not trying to do custom captcha.
Doing your own captcha request a solid algorythm and a way to do the image processing.

Having a solid server side form validation will help a lot.
Having brute force functions will also protect the form, specially on login form.

suresh pondicherry

ASKER

Hey..i don't want to use recaptcha...i need to bring that text box effect by applying stylesheets..
Created read only textbox and need to show textbox values as image fonts..

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

suresh pondicherry

ASKER

Thanks!