Placing text on top of an input field using HTML and CSS

I am currently in the process of creating a website for my high school that will allow students to access their class schedules online. To differentiate each class, I have assigned them different background colors. This is achieved on the main page by adjusting the background color of a <td> tag.

For the settings page, I would like to provide users with the ability to customize these colors using a color input feature.

To enhance user experience, I intend to overlay text onto each color input field indicating the corresponding class (e.g., 'math') to ensure readability and also establish a clear connection between the input and its associated block.

Though when I attempt to use a <span>, it appears beside the input rather than over it. Any suggestions or solutions would be greatly appreciated. Thank you!

.colorInput {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background-color: transparent;
    border: solid 0px;
    height: 50px;
    width: 100px;
}
<form>
    <table>
        <tr>
            <input type="color" class="colorInput" id="color1" />
            <input type="color" class="colorInput" id="color2" />
            <input type="color" class="colorInput" id="color3" />
            <input type="color" class="colorInput" id="color4" />
            <input type="color" class="colorInput" id="color5" />
            <input type="color" class="colorInput" id="color6" />
            <input type="color" class="colorInput" id="color7" />
        </tr>
    </table>
</form>

Example:

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

htmlcss

Answer №1

To achieve this layout easily, utilize Flexbox along with specific positioning techniques. It's crucial to apply a black outline to the text for readability against any background color.

.flex {
  display: flex;
  flex-flow: column;
  align-items: center;
}

label>input {
  width: 100px;
  height: 60px;
}

label {
  position: relative;
  width: 100px;
  height: 60px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

label>span,
label>input {
  position: absolute;
}

label>span {
  color: white;
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
  font-family: sans-serif;
}
<div class="flex">
  <label>
  <input type="color" class="colorInput" id="color1" />
  <span>Math</span>
  
</label>
  <label>
  
<input type="color" class="colorInput" id="color2" />
<span>Science</span>
</label>
  <label>
  
<input type="color" class="colorInput" id="color3" />
<span>English</span>
</label>
  <label>
  
<input type="color" class="colorInput" id="color4" />
<span>P.E.</span>
</label>
  <label>
  
<input type="color" class="colorInput" id="color5" />
<span>Social Studies</span>
</label>
  <label>
  
<input type="color" class="colorInput" id="color6" />
<span>Foreign Language</span>
</label>
  <label>
  
<input type="color" class="colorInput" id="color7" />
<span>Elective</span>
</label>
</div>

Answer №3

Give this a shot, try implementing the position property

find more details here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

.colorInput {
display:block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background-color:transparent;
border: solid 0px;
height: 50px;
width: 100px;

}

.class{
  position: absolute;
  top: 50%;
  left: 50%;
}

.containerExample{
  position:relative;
}
<form>
                        <table>
                            <tr>
                           
                                <div class="containerExample">
                                  <input type="color" title="math" class="colorInput" id="color1"/>
                                  <label class="class" for="color1" >ola</label>
                                </div>
                                <div class="containerExample">
                                  <input type="color" class="colorInput" id="color2"/>
                                  <label class="class" for="color2" >ke ace</label>
                                </div>

                                <div class="containerExample">
                                  <input type="color" class="colorInput" id="color3"/>
                                  <label class="class" for="color3" >ke ace</label>
                                </div>

                                <div class="containerExample">
                                  <input type="color" class="colorInput" id="color4"/>
                                  <label class="class" for="color4" >ke ace</label>
                                </div>

                                <div class="containerExample">
                                  <input type="color" class="colorInput" id="color5"/>
                                  <label class="class" for="color5" >ke ace</label>
                                </div>
                                
                                <div class="containerExample">
                                  <input type="color" class="colorInput" id="color6"/>
                                  <label class="class" for="color6" >ke ace</label>
                                </div>

                                <div class="containerExample">
                                  <input type="color" class="colorInput" id="color7"/>
                                  <label class="class" for="color7" >ke ace</label>
                                </div>

                            </tr>
                        </table>
                    </form>

Answer №4

Consider utilizing the z-index attribute or adjusting margins to achieve the desired layout.

The z-index attribute determines the stacking order of elements on a page. Elements with a higher stack order will appear in front of those with a lower stack order. Keep in mind that z-index only applies to positioned elements (position: absolute, position: relative, position: fixed, or position).

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

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...

javascripthtmlcssgoogle-apps-scriptnumber-formatting

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

jqueryhtmlcss

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

jqueryhtmlcsstwitter-bootstrap-3css-shapes

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

Uppercase the initial letter in a term to indicate a standard condition

I'm struggling to override the CSS in material UI. Even though I tried capitalizing both words, it only changes on selected and hover states, Is there a way to change it in the normal state as well? I've tried debugging but can't seem to fin ...

javascripthtmlcssreactjsmaterial-ui

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

Altering the background color of the navigation bar when scrolling

So, my navigation bar starts with a transparent background, but I wanted it to change to a different background color when a user scrolls down. I found a solution in this question: Changing nav-bar color after scrolling? My current code now looks like th ...

jquerycss

TypeScript: displaying parameters

variable_field = [["S",".","."],[".","#","."],[".",".","T"]]; <ng-template ngFor let-array [ngForOf]="field_array" let-x="index"> <ng-t ...

htmlangulartypescript

Using React Redux to Calculate the Grand Total Price of all Products Added to Cart

<div className='container py-4 my-5'> {item.length === 0 ? ( <p> cart is empty, <NavLink to='/'>continoue shopping</NavLink> </p> ) : ( item.map((cart) => { return ( & ...

htmlreactjsreduxredux-thunk

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

javascriptcsssizescreen

Create a randomly generated value in a JSON format

{ "description": "AppName", "name": "appName", "partnerProfile": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19090b1969c90989ddf929e9c">[email protected]</a>", "firstName": "John", ...

javascriptjqueryhtmljsonrandom

Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. ...

javascripthtmlcssfrontendbootstrap-5

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

Why do images show up on Chrome and Mozilla but not on IE?

I have tested the code below. The images display in Chrome and Mozilla, but not in IE. The image format is .jpg. Can someone please assist? bodycontent+='<tr class="span12"><td class="span12"><div class="span12"><img class="span ...

javascriptjqueryhtmlcssjsp

What could be the reason for the nav icon not displaying?

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot ...

htmlcssbootstrap-5

What causes the discrepancy in margin values between desktop and mobile devices?

In my project, I have a collection of div elements that need to be spaced vertically from one another by the height of the window plus an additional 100px. However, I encountered a discrepancy when setting this margin using jQuery between mobile and deskto ...

javascriptjquerycsswindow

The navigation links will remain visible even when the unordered list is set to 0% opacity

I've been working on creating a side navigation menu using HTML, CSS, and Javascript. I successfully implemented the function to toggle open and close the navigation, but upon adding a background image, I noticed that the links still appear even when ...

javascripthtmlcss

How to create a navigation search bar using HTML/CSS or Bootstrap

Seeking advice on how to recreate this UI layout. Does anyone have suggestions or know of any helpful resources? I am particularly struggling with linking the search bar to the navbar. https://i.sstatic.net/PMI2w.png ...

htmlcsstwitter-bootstrap

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

jquerycssimagefadeoutfadein