Magento 1.9 CSS Help – Placing Span on Top of Input Field

csshtmlmagento-1.9

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.

Test site

You can play around with the CSS on my test site

e-mail: test@test.com

password: test123

(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.

Best Answer

You'll need to use CSS to position the span on top of the input.

I've done a very very rough example here, I recommend adding new classes rather than styling input-box, input-text and using an ID.

So you can see the span is on top I've given it a red background.

enter image description here

Code can be seen here.

You'll need to tweak the code as I've removed parts of the markup and adding more CSS than is required due to not having any default styling. But this should give you a good example on how to do it.

Related Topic