I am trying to make input text for street address turn red if it is too long, like in this fiddle.
For that I have created a
<span id="street1span"></span> in the "input-box"
div like this:
<li class="wide"> <label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label> <div class="input-box"> <input type="text" name="street" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>" title="<?php echo $this->__('Street Address') ?>" id="street_1" class="input-text <?php echo $_streetValidationClass ?>" /> <span id="street1span"></span> </div> </li>
Which does what I want.
The problem is that I need to get this span on top of the input field and make the actual input text transparent so it looks natural.
You can play around with the CSS on my test site
(only the first address field)
I don't have a lot of experience in web design and I realise that this is more of a general question and not Magento, but there is something with Magento CSS classes that interferes with what I am trying to do, I cannot figure out what.