One option is to use a prepended input, like shown here:
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" placeholder="Email" />
</div>
Is there a way to make the blue outline (indicating focus) surround the prepended symbol?
For example, similar to how GitHub repositories handle the search field (e.g. https://github.com/cloudera/repository-example)
To create a blue aura around an input element with the :focus pseudo selector, you can extend the size of the input element to achieve this effect.
This involves positioning the .add-on on top of the input element.
You can view an example of this concept on JSFiddle, although it may slightly impact Bootstrap styling.
In order to implement this, you can use the following CSS:
.input-prepend .add-on{
/* Position the add-on element above the input */
position: absolute;
/* Ensure the z-index is higher than the focused input */
z-index: 3;
}
.input-prepend input {
/* Adjust padding to prevent overlap with add-on */
padding-left: 32px;
/* Maintain border radius for aesthetic purposes */
border-radius: 4px;
}
.input-append .add-on, .input-prepend .add-on {
/* Remove unnecessary borders */
border: 0;
/* Create separation between input and add-on */
border-right: 1px solid #ccc;
/* Compensate for gap caused by removing border */
margin: 1px 0 1px 1px;
}
This code snippet has been tested on IE9+, Firefox, and Chrome browsers. Unlike other solutions using z-index, this code allows users to click on the icon for input, making it user-friendly across different browsers.
.input-prepend {
border-radius: 4px;
background: white;
}
.input-prepend .add-on {
margin-right: -28px;
}
.input-prepend input {
border-radius: 4px;
background: none;
padding-left: 34px; /*28 for icon, 6 for normal padding*/
}
The negative right margin of the icon causes the input element to overlap it. The input is given all the necessary styles like border-radius and transparent background to ensure the icon remains visible. Extra padding on the right of the input accommodates the icon. Also, the wrapper element is styled with border-radius and background color to maintain consistency.
Update: Removing Inset Shadow on Icon
This updated version addresses the issue of inset shadow mentioned in a comment. Some browsers may not fully support the pointer-events property, causing a small portion of the icon area to be non-responsive for triggering input actions.
.input-prepend:before,
.input-prepend:after{
content: '';
display: block;
top: 1px;
left: 1px;
width: 24px;
height: 4px;
border-radius: 4px 0 0 0;
border: 2px solid #eee; /* matching icon's background */
border-width: 2px 0px 0px 2px;
position: absolute;
z-index: 2;
pointer-events: none; /* for browsers that support it */
}
.input-prepend:before {
width: 4px;
height: 24px;
top: 4px;
border-radius: 0 0 0 4px;
}
I adapted Ben Swinburne's solution to accommodate prepended and appended fields:
<div class="input-prepend input-append input-prepend-inner">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" placeholder="Email" />
<button class="btn" type="button">Copy</button>
</div>
CSS:
.input-prepend-inner .add-on
{
/* Adjust the position of the add-on above the input element */
position: absolute;
/* Set a higher z-index to handle focus */
z-index: 3;
}
.input-prepend-inner input[type=text]
{
/* Move text in the input field to avoid overlapping with the add-on */
padding-left: 32px;
/* Reapply border radius to maintain styling consistency */
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.input-prepend-inner .add-on
{
/* Adjust styling to separate add-on from input field */
border: 0;
border-right: 1px solid rgb(204, 204, 204);
margin: 1px 0 1px 1px;
}
When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...
While using the TextField form from material-ui, I noticed that it generates an input element with default styles such as Mui-root, including borders and border-radius. Is there a way to disable these default material-ui styles? ...
I'm in the process of setting up a view page for a post on the main page of a website. Both pages share the same header and footer files, located at the same directory level. However, while one page is functioning correctly, the other is not. The erro ...
Is there a way to make my text adjust to different screen sizes and remain fixed in position? I would like my text to be centered and have its position fixed Did I do the right thing by centering the text or is there a better way? Also, how can I solve m ...
Recently, someone assisted me in removing the outline of my select box in my debut bootstrap-django project. Now, I am seeking your guidance on altering the border color property of the options box itself from blue to yellow. Strangely, when the select box ...
I am looking to change the appearance of my Instagram icon when hovering over it. I want the background to turn white and the icon to become colored. Here is my code snippet from Footer.js : <a href="https://www.instagram. ...
I recently set up a Wordpress blog with the BJ Lazy Load plugin and the AVADA theme. However, I've noticed a significant gap under the images on my post grid blog items when scrolling past the page fold. To address this issue, I implemented a fix by ...
When working with HTML / CSS, adding placeholder text to a textbox is typically done like this: <input type="text" class="input-class" placeholder="Please enter your email"/> However, in my case, I am using the provided code for a login panel in Vi ...
Below is a Rails code snippet for input fields. Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%> <br/> Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%> ...
When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...
I'm struggling with getting rid of a 1px border around certain highlighted boxes in my gridview. The issue persists on both IE7 and FF. Rendered html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ ...
I've been working on a WordPress theme with the bootstrap framework to style my page. First, I created a mock-up using standard HTML to ensure everything looked as desired: Prototype Code: <!DOCTYPE html> <html> <head> <meta c ...
Check out this link: https://jsfiddle.net/nsx6nvs5/ Here is the HTML code: <div id="btn"></div> This is the corresponding CSS: #btn { height: 100px; background-color: red; transition-duration:1s; } #btn: ...
I am trying to include small images to the left and right of a hyperlink. These images will vary, so I want to implement it using CSS classes for reusability. So far, I have successfully added the image either to the left http://jsfiddle.net/XAh2d/9257/ . ...
I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...
I have here my html code featuring two different sections that I need to make dynamic within Wordpress. <section class="contact"> <h1>how it works</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Om ...
There's a simple question I have for all you HTML and CSS experts out there. I'm attempting to center align a list next to an image, but I can't seem to figure out how to position the list to the left or right of the image. This is what my ...
I'm looking to customize the default header of a div using a JavaScript function, but the final result of my code is displaying as [object HTMLDivElement]. Here's the code snippet I'm working with: function CustomizeHeader(){ va ...
I need help troubleshooting a WooCommerce collapsible checkout form using Bootstrap Collapse. Below is the HTML markup I am currently using: <div class="panel-group" id="checkout-accordion"> <div class="panel panel-default" id="panel-billing"&g ...
A toggle switch has been implemented using bootstrap with the following code snippet: <label > Automatic Refresh: </label> <input class="pull-right" data-size="mini" type="checkbox" data- toggle="toggle"> When the toggle button is in ...