CODEWITHSUNDEEP
htmlcss
Roman Matveev
Roman Matveev

Reputation: 577

What is the best practice to place an icon on the right of the text input field

I'd like to place an icon in the right part of the text input. I'd use a background image with the following CSS setting:

input[type=text].dropdown {
  bachground-image: /images/down.png
  background-repeat: no-repeat;
  background-position: right center;
}

I foresee the following problems:

Is there any better practices to do such a thing?

Upvotes: 4

Views: 1296

Answers (2)

LOTUSMS
LOTUSMS

Reputation: 10240

w3d raises very good concerns. A lot of the "if's" you are thinking about don't seem too common. And if they do happen because you are setting up an environment that will allow it or need it (hard to say until I see the actual environment) then what you should do is use dynamic code to make the adjustments.

Here is an example I made with the most basic way to do what you're doing

JSFiddle Demo

Now, as far, as covering your 6 on the possibility that another image would be inserted, etc. You will need the following logic:

  1. Assuming the user is the one inputting the images you want to stack next to each other. Have the image post to the database
  2. Dynamically echo it with a conditional statement that says if image != 0 then echo as many as you want

Each instance of a below would be dynamically done as I explained above

HTML 

<div class="form-group">
<label for="txtDate">LABEL</label>
    <input type="text" class="txtcalendar" id="txtDate" placeholder="E.g. mm/dd/yyyy" />
    <span>
       <img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
       <img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
    </span>
</div>

Upvotes: 2

MrWhite
MrWhite

Reputation: 45829

the text I will put into the input will overlap the image unless I will made some extra styles for the input basing on the image size

It is common to simply apply padding-right to the element in this case in order to "clear" the background-image. But you do obviously need to know the approximate size of the image....

However, you seem to have a lot of "what-ifs", which makes me think you are over engineering (or over thinking) the problem? Unless perhaps you are wanting to allow users to customise the interface? But even then I think these could be solved in different ways.

if the size is not predictable it will a real headache!

Why is it not predictable? Something like this would normally be solved at the design stage and is very predictable. If you are allowing users to submit images, then you should perhaps resize the image when submitted.

if the input size will change - I will have to scale the image by my self

That will really depend on how the input size changes. If the element simply grows longer then you may not need to change anything. But again, this would normally be something which is solved at the design stage.

if I will need to place one more image on the left I will not be able to do it

Why would you need to place an image on the left and the right - at the same time? I can imagine if you needed to account for right-to-left text then you might need to swap the image placement, but not normally both at the same time?

However, you can actually use multiple background images with CSS3, as long as you don't need to support IE8 and earlier. Ref: http://caniuse.com/multibackgrounds

But if you did have multiple background images, how would you deal with assigning event handlers (which seems to be what you are doing with the "dropdown")? You'll need a separate element.

Upvotes: 2

Related Questions