Textbox with an icon embedded within - reminiscent of the sleek glyphicon design

I'm working on adding a Symbol to a textbox that needs to always be visible, without involving code behind (when accessing the value of the textbox). It should be like a glyphicon icon. I attempted using a span but it's not appearing the way I want it to.

This is my current code:

    <div class="input-group">
         <span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
         @Html.TextBoxFor(m => m.AgreedValue, new { @class = "form-control", placeholder = "Agreed Value" })                                
    </div>

Here is the current display:

https://i.sstatic.net/OeZ2S.png

And this is the desired display:

https://i.sstatic.net/fESR6.png

Is there something I am overlooking? Or how can I achieve the look in the second image?

cssasp.net-mvcasp.net-mvc-4bootstrap-4

Answer №1

When it comes to web design, style is key. If you're looking to customize the appearance of your HTML, check out this unique solution:

.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.input-text {
  border: none;
  height: 100%;
  width: 100%;
  background: transparent;
  padding-left: 10px;
}
.input-text:focus {
outline: none;
}
.input-group {
padding-left: 10px;
width: 300px;
height: 40px;
border: 1.5px solid rgba(0,0,0,0.2);
box-sizing: border-box;
border-radius: 4px;
}
    <div class="input-group">
         <div>
         <span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
         </div>
         <input type="text" class="input-text">                               
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement a single CSS menu across various HTML pages

I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...

htmlcss

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Is there a way to format a single line of text with certain words bolded and the rest regular? I have a specific example pictured here: Picture of my Issue Specifically, I'm looking to bold "Honors:" and "Capstone:", while keeping the surrounding tex ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Add CSS styling to a single form

When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...

htmlcss

Event triggered before opening the cell editor in ag-Grid

I'm facing a scenario where I have a grid with rows. When a user double clicks on a cell, a cell editor opens up. There are events associated with the cellEditor - cellEditingStarted and cellEditingStopped, but I need an event that triggers just befor ...

htmlcssangularag-gridtablecelleditor

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

jqueryhtmlcss

Having trouble with loading a background image from an external CSS file in Django

I am encountering an issue when attempting to load an image through external CSS on my Django project. While it works fine with inline CSS, I am curious as to why it fails with an external stylesheet. Any assistance on this matter would be greatly apprecia ...

pythonhtmlcssdjango

Wordpress form entry process

I've been tasked with redesigning a website for a client using Wordpress. The form submission was working flawlessly on the old static site, but it's now encountering issues in Wordpress. Within the php file in my theme's backend, I have th ...

formspostbootstrap-4

Tips for leveraging Membership and Role providers

In the process of developing an ASP.NET MVC 4 application, I have chosen to utilize the Database First Entity Framework for handling database access. I have designed custom membership tables and have successfully implemented my own Membership provider an ...

c#asp.netasp.net-mvcmembership-provider

How can I fix the issue with border-radius not displaying correctly in tcpdf and how can I ensure the text is shown on

Currently, I am utilizing tcpdf to showcase a circle and text together in a PDF. Despite my attempts with the code below, the border-radius attribute is not functioning as expected: Upon implementation, I obtained the following result: https://i.sstatic. ...

htmlcsspdftcpdfborder-radius

Compatibility issues between bootstrap-select-rails and bootstrap 4 causing functionality problems

I've been working on a new project using Bootstrap 4 and the bootstrap-select-rails selectpicker. However, I'm facing an issue where the selectpicker isn't functioning properly and is not displaying the correct styling. Here is how the selec ...

rubybootstrap-4ruby-on-rails-5

Personalizing the height and width of a jQuery UI Slider

While adjusting the height/width of the jQuery UI Slider and handle, I've noticed that the handle sometimes slides too far to the left, going off the slider. Is there a recommended way to prevent this from happening? You can see what I mean by checki ...

jquerycssjquery-uislider

Paginating: Restrict the page number for smaller screens

When viewing on a small screen device (> 641 px), my pagination should resemble https://i.sstatic.net/dSSUX.png Conversely, on screens that are medium-sized and larger (< 641 px), the pagination should appear as shown here: https://i.sstatic.net/C1E ...

jqueryhtmlcssjquery-pagination

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

Click on the appended text to remove it using Jquery

Seeking a more efficient and streamlined approach for appending and removing appended spans, divs, or text. Below is the code snippet - any insights on what could be improved? /* HTML CODE */ <div id="appendHere" style="padding:10px;border:solid 1px ...

javascriptjqueryhtmlcssappend

Incorporate a CSS transition duration for switching classes with JavaScript

I need assistance with adding a transition time to my JavaScript toggle class function. I had previously coded it but have now forgotten how to do so. Any guidance would be highly appreciated. <!DOCTYPE html> <html> <head> <style typ ...

javascripthtmlcsstoggletransition

What is the best way to apply hover effects to all links except the one being hovered over, using a combination of javascript, jquery,

While browsing the web, I came across a fascinating hover effect that I'm eager to replicate in a website's navigation bar. This effect doesn't just change the link you hover over, but it alters every other link in a unique way. When hoverin ...

javascriptjqueryhtmlcsshover

What is the process for designing custom width columns using Bootstrap?

I am working on a table with three columns that is styled using the Bootstrap class "table table-striped". However, I need the first column to be 100px in width, the second column to be 400px, and the third column to be 200px. How can I achieve this cust ...

htmlcsstwitter-bootstrap

Correctly align the div on the screen as the viewport is scrolled

I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...

javascriptjqueryhtmlcssparallax

Forwarding the main webpage from the child Html.renderAction without the need for Ajax, Java, Jquery, or similar technologies

Having an issue with a form in Html.RenderAction where after submitting the form, I need to reload the parent but keep running into the error message "Child actions can not perform redirect actions." Any suggestions on how to resolve this without using Aja ...

c#htmlasp.net-mvc

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...

htmlcsscss-positionabsolute