0

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: [email protected]

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.

0

2 Answers 2

3

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.

2
  • Sorry for coming back to this, but is there a way to have the span in front of the input field while still being able to type in the field? Aug 15, 2017 at 10:05
  • @JurģisTomsLiepiņš Yeah sorry, you can use pointer-events: none; as long as you don't need IE10 support. I've updated the codepen example.
    – Ben Crook
    Aug 15, 2017 at 10:20
0

You can do it simply like this

<li class="wide">
    <label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label>
    <div class="input-box address-field"> // class added here "address-field"
        <span id="street1span" style="display:block;"></span>
        <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 ?>" />
    </div>
</li>

Or with javascript like this :

$('#street1span').each(function() {
    $(this).insertAfter($(this).parent().find('.address-field'));
});

Demo

6
  • Euh why the downvote ?
    – PЯINCƎ
    Aug 7, 2017 at 14:14
  • I have not downvoted! will try this later and post back;) Aug 7, 2017 at 14:19
  • Hmm, this just puts the span above the input box and not on top of it Aug 8, 2017 at 9:33
  • above but not on top ? in order you want to display the span first then the input box ?
    – PЯINCƎ
    Aug 8, 2017 at 9:43
  • With "on top" I mean, literally overlapping with the input text perfectly Aug 8, 2017 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.