如何在输入框内放置Glyphicons？现有方案均失效

It sounds like your inline icons are mispositioned relative to the input field—this is almost always a CSS layout issue. Let’s walk through the most common fixes that usually resolve this problem:

1. Anchor Icons to the Input’s Parent Container #

If your icons use absolute positioning (standard for inline input icons), their parent element needs position: relative so icons anchor to the input’s wrapper instead of the page. Here’s how to adjust your CSS:

/* Target the parent div wrapping your input and icons */
.form-group > div {
  position: relative;
}

/* Style icons to sit inside the input */
.input-icon {
  position: absolute;
  right: 12px; /* Adjust to move icons left/right */
  top: 50%;
  transform: translateY(-50%); /* Vertically center icons */
  pointer-events: none; /* Let clicks pass through to the input if needed */
}

2. Add Right Padding to the Input #

Without extra padding on the input’s right side, icons will either overlap text or sit outside the input’s border. Create space for them with:

#NazwaPelna {
  padding-right: 45px; /* Adjust based on your icon size */
}

3. Use Flexbox for Inline Alignment #

If your icons are in separate elements next to the input, wrap everything in a flex container to keep them aligned within a single visual box:

.input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ddd; /* Match your input's border style */
  border-radius: 4px; /* Match your input's border radius */
}

.input-wrapper input {
  border: none;
  flex: 1;
  padding: 8px 12px;
}

.input-wrapper .icon {
  padding: 0 10px;
  cursor: pointer;
}

Update your HTML to use this wrapper:

<div class="input-wrapper">
  @Html.TextBoxFor(Model => Model.NazwaPelna, new { Name = "NazwaPelna", ... })
  <span class="icon ok-icon">OK</span>
  <span class="icon remove-icon">Remove</span>
</div>

4. Fix Conflicting CSS #

Existing framework or custom styles might be overriding your positioning. Use your browser’s DevTools (F12) to inspect elements:

• Check if the parent container has unintended position properties.
• Verify the input uses box-sizing: border-box (so padding doesn’t expand it beyond its container):

* {
  box-sizing: border-box;
}

• Look for margins/paddings on icons that push them outside the input.

Try these steps one by one—adjusting parent positioning and input padding usually fixes the issue immediately.

内容的提问来源于stack exchange，提问作者Michał Ciszewski