I am looking for a way to automatically add a # before a hex color code in an input field and center both the div and span containers horizontally:
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
Despite using the CSS below:
html, body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
border: none;
background-color:#444;
text-align:center;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
While I successfully align the hash symbol at the beginning and center the span and input elements, the issue arises when trying to set the width of the div. The width is not maintained and defaults back to the left side.
Therefore, I am seeking a solution to properly center both the div and span elements, while also having the ability to adjust the width of the div container.
Here's a fiddle with the code.