简体   繁体   中英

Change a single placeholder character color?

Is there anyway to get this script to work if its even possible, I want to add a red (*) to the end of specific placeholders I tried the CSS :after pseudo which works really well in chrome. But I need it cross browser.

I have some java script that replaces any ( ) with a red( ) but with it being in a place holder it displays the tags.

<head>
#inputFormBorder ::-webkit-input-placeholder:after {color:red;content:"*";}
#inputFormBorder ::-moz-placeholder:after {color:red;content:"*";}
#inputFormBorder :-ms-input-placeholder:after {color:red;content:"*";}

#inputFormBorder0 ::-webkit-input-placeholder:after {content:"";}
#inputFormBorder0 ::-moz-placeholder:after {content:"";}
#inputFormBorder0 :-ms-input-placeholder:after {content:"";}

input {width:300px;}
</head>
<body>
<h4>this only works in chrome</h4>
<div id="inputFormBorder">
    <input name="UserName" type="text" id="UserName" placeholder="User Name or Email">
   <div>

       <br><br>

<h4>cross browser?</h4>
<div id="inputFormBorder0">
    <input name="UserName" type="text" id="UserName" placeholder="User Name or Email*">
   <div>

  <br><br>

<div id="inputFormBorder">
    js turned this red *
   <div>

<script>
$('#inputFormBorder0').each(function () {
    $(this).html($(this).html().replace(/(\*)/g, '<span style="color: red;">*</span>'));
});
</script>
</body>

https://jsfiddle.net/zo16ruxd/15/

this jsfiddle should explain better.

Thanks!

you mean something like this? https://jsfiddle.net/zo16ruxd/17/ if yes, why not use <span> ?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM