0

I'm building a website for my high school so students to view their class schedules online. Each class has a different background color. On the main page, I do this by changing the background color of a <td> tag.

On the settings page, I want to allow users to change this color, using a color input.

I want to overlay text over each of these inputs (the users class name, like 'math' for that block) so the user can make sure that they are choosing a readable color. It also is a cool way to show which input goes to each block.

When I include a <span>, it goes next to the input, not over it. Any ideas? Thanks!

.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:

Current Page

khan
  • 1,466
  • 8
  • 19
Skyler Wiernik
  • 108
  • 1
  • 11
  • For your case you can absolute position your element inside a relative container. https://jsfiddle.net/n1z4uqst/ , please see the thread for more information: https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element – mulsun Sep 21 '19 at 22:44

4 Answers4

1

You can set this up pretty easily with Flexbox and some special positioning. Be sure to give the text a black outline so you can read them no matter what the 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>
symlink
  • 11,984
  • 7
  • 29
  • 50
0

do you mean something like this? https://www.w3schools.com/howto/howto_css_image_overlay_title.asp

Or add a "<"label">" then styling it to sit on top of the boxes

Soot3
  • 16
  • 2
0

Try this, you can use the position property

more info: 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>
Israel Perales
  • 2,192
  • 2
  • 25
  • 30
0

Try using the z-index property or negative margins.

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position).

N3R4ZZuRR0
  • 2,400
  • 4
  • 18
  • 32
Ijeoma Onwudiwe
  • 1
  • 1