Customizing the Background of an Input Box

How can I create an input box with a specific background?

I have tried the following code but it's not displaying properly. What is the correct way to achieve this?

In addition, I need to create variations of this button as described below:

  • I want to add a cross on the dark area of the button using a <span> tag with a custom class. Is this a good approach?

  • Another variation requires a paper clip icon after the curve on the left side. Would using a <span> tag with a class be suitable for this too?

HTML:

<div class="innerTo">
        <form action="#" method="get">
           <label for="recipients">TO: </label>
              <input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
    </form>
    </div>

CSS:

.innerBar .innerTo{
    width:200px;
    padding:5px 0 0 15px;
    display:block;
    float:left;
}
.innerBar .innerTo label{
    margin:0 15px 0 0;
    font-size:14px;
    font-weight:bold;
    color:#666666;
}
.innerBar .innerTo input[type=search] {
    color: red;
}
.innerBar .recipients{
    background-image:url('../images/searchBGpng.png') no-repeat;
    width:192px;
    height:27px;
}

Answer №1

Check out this Fiddle:

<div class="input-container">
    <input type="text" value="aaaaaaaaaaaaaaaaaa"/>
</div>

.input-container {
    background: url(https://i.sstatic.net/0Vlc5.png) no-repeat;
    width:197px;
    height:28px;
}
.input-container input{
    height:28px;
    line-height:28px;/*results in nice text vertical alignment*/
    border:none;
    background:transparent;
    padding:0 10px;/*don't start input text directly from the edge*/
    width:148px;/*full width - grey on the side - 2*10px padding*/
}

If you're thinking about using it with different widths, consider exploring the sliding doors technique.

Answer №2

I have designed a new set of code for your form. If you find it suitable, feel free to integrate it into your HTML code.

Feel empowered to make this change!

HTML Code

<form action="#" method="get">
           <label for="recipients">TO: </label>
              <input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
    <input type="submit" value="">
    </form>

CSS Code

label{
float:left;
margin:25px 0 0 0px;
padding:0;
}

input[type="search"], input[type="submit"]{
margin:20px 0 0 0px;
padding:0;
line-height:28px;
height:28px;
background: url("https://i.sstatic.net/0Vlc5.png") no-repeat 0 0;
border: 0 none;
float:left;
}

input[type="search"]{
width:152px;
padding-left:15px;
}

input[type="submit"]{
background-position:-167px 0;
width:30px;
cursor:pointer;
}

View the live demo here.

Remember to customize the code according to your layout needs as this is just a demonstration.

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

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

Ways to reduce lag while executing a for loop

How can I optimize my prime number generation process to avoid lagging? For example, is there a way to instantly display the results when generating primes up to 1000? HTML: <!DOCTYPE html> <html> <meta name="viewport" content="width=dev ...

I prefer the jumbotron to be uninterrupted by the navbar

I'm facing an issue where my jumbotron is ending up under the navbar, but I want to position it just below with some padding in between. Here's the code snippet: Take a look at the current appearance here: This is how it looks like ...

What is causing the align content property to not function as expected in this situation?

Is it expected for the flex items of the .center-section-container to be closer together when using this property? They do not seem to be affected at all. I have applied flex wrap so the items are now in different lines but too far away from each other, I ...

What is preventing my video from filling the entire screen?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d ...

The function in jQuery that can be used to hide a <div> when clicked

I am facing a problem with my jQuery code that is supposed to remove/hide a specific div. Despite checking various examples, I can't seem to make it work properly. This issue arises in the context of jQuery on Drupal 7. The live site where this proble ...

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

Move the menu position in Bootstrap 4 navbar

<div class="fixed-top"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Hidden content</h5> <span class="text-muted">Toggleable via the ...

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

What are the best practices for implementing the CSS id selector?

As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected: li { border: 3px solid red; } h3 { background: green; } #special { color: green; } <h3>Todo List</h3> < ...

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

Can a border-bottom be made the same size as a class it is not linked to in CSS?

Can I set a border-bottom to match the size of a separate class? For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width. Each < ...

You are limited to using a maximum of two custom tags within a custom div

I came up with this code that is supposed to style the elements differently based on their tag names. However, when I tested it, the styling did not work as expected. For example, 'London' should be displayed as a large and bold h1 text, while th ...

Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...

How do I implement various templates for distinct views in Angular?

My website built with AngularJS used to have a specific layout structure in the index.html file: ... <div class="layout stuff headers whatever">My awesome header layout</div> <div class="container" ng-view=""></div> <div class=" ...

Centralized Column Design with Bootstrap 4

Currently, I am using bootstrap 4 and have a row with 3 columns. The center column is set to col-7, but I need it to be flexible and take up all remaining horizontal space in the row. I attempted to use flex-col, but it caused issues with the layout. In th ...

React beautiful dnd and Material UI list encountering compatibility problem

I recently encountered an issue while using react beautiful dnd to create a rearrangeable Material UI List. Everything was working correctly, except for the ListItemSecondaryAction within the list. When dragging a list item, the ListItemText and ListItemIc ...

Steps for adjusting the margin of a section using the p tag

Newbie CSS inquiry here... Here's what I currently have in my stylesheet: #topheader { position: absolute; width: 100%; height: 100px; background-color: #D1E6DA; font-size: 200%; } I want to include the following: p { margi ...

The Clash of Form Action and JavaScript

Can someone help me with this issue? I have a form and a script to trigger an alert message. The code I'm using is working well: <input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...typ ...

Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the ...