Add content to text input

HTML & CSS
1 
<input type="email" size="61" class="focus">

.focus {border: 1px solid red;outline: none;}

.focus:before{
content: "X";
position: relative;
top: -24px;
left: 500px;
color: red;
}

How can I get the X mark to show up in the text box?

2

Hi there makamo66,

unlike the div or p elements the input element has no before or after. :mask:

What actual behaviour do you wish the “X” to have?

coothead

3

As mentioned in your other thread, the :before pseudo-class doesn’t work with input elements. If you want to show an X (based on the :invalid pseudo-class, I’d suspect), this would have to be a sibling element. However, you could lay that element over the input by absolutely positioning it like

CSS

.container {
    position: relative;
}

.focus {
    border: 1px solid red;
    outline: none;
    padding-left: 20px;
}

.x {
    display: none;
    position: absolute;
    top: 1px;
    left: 2px;
    font-family: "monospace";
    color: red;
}

.focus:invalid ~ .x {
    display: block;
}

HTML

<div class="container">
    <input type="email" size="61" class="focus">
    <div class="x">X</div>
</div>

x-post

1 Like
4

Did you want the ‘X’ to actually show up inside the text box, like a placeholder? <input type="email" size="61" class="focus" placeholder="X"> ?

1 Like
5

Do you want “X” to show up as a placeholder, a label or a default?

As webMachine pointed out, HTML5 offers a placeholder attribute, but you should check browser support to see if this would cause browser support issues with your intended audience.

If “X” is a default value, just set it as such in the value attribute, if the end user inputs something else that’s what will be sent when the form submits.

NOW… if “X” is a label, “your email:” for example, you should set this up as a different tag and then stile that with CSS and if necessary .js to achieve the desired effect. Remember a label is semantic information telling user what the field they are filling is about. This fact should NOT be taken lightly. :slight_smile:

If that’s the case you could handle the situation in a manner similar to this:

<html>
    	<head>
    		<title></title>
    		<style type="text/css" media="screen">
    			p { padding:1.3em .7em .7em .7em; margin: .5em 0; border: 1px solid #ccc; position: relative;  font-family: sans-serif; overflow: hidden;}
    			label{   top:1.5em; left:.7em; transition: .5s  ease-in; position: absolute; color:#ccc;}
    			.floated {  margin-bottom:-1.3em;font-size: 70%;   top:.7em; left:1em; color: orange; font-weight: bold}
    			input{ border:none; width: 100%; background: #fff; font-size:120%}
    		</style>
    	</head>
    	<body>
     		 <p><label>Email:</label><input type="text" name="it" id='it'  onkeypress="check(this)" onblur="check(this)"></p>
     		 <p><label>Another Field:</label><input type="text" name="it" id='it'  onkeypress="check(this)" onblur="check(this)"></p>
      	</body>
    	<script type="text/javascript">
    		 function check(o){
     			 if (o.value ==='' ) { o.previousSibling.className='';}
     			 else { o.previousSibling.className='floated';}
     		 }
    	</script>
    </html>

hope that helps

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.