How to add a little square into input for preview a color with colorpicker

I want to add a little square into my input text where I can change color according to the input value like this photo:

enter image description here

I have to use bootstrap colorpicker

at this moment I have this in my code:

   <div class="form-group row">
        <label for="theme-color"
           class="col-sm-2 col-form-label font-weight-bold">{{__('template.edit.site_identity.description')}}</label>
        <div class="col-sm">
            <div id="demo">
               <input type="text"
                    id="theme-color"
                    class="form-control @error('theme-color') is-invalid @enderror"
                    name="theme-color"
                    value="#FFFFFF">
               @error('theme-color')
               <span class="input-group-append">
                      <span
                      class="input-group-text colorpicker-input-addon"><i></i></span>
               </span>
               <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
                 @enderror
            </div>
        </div>
   </div>

and the javascript:

<script>
    $('#theme-color').colorpicker();
</script>

how can I add the little square and change the color according to the value from the “theme-color” input?

Answer

You could style a parent element that is wrapping an input type of color using CSS. Then use JS to change the text inputs value to the color-theme on change using an event listener.

Note on Styling: depending on the height of your input, you can style the trailing element, <span> tag in my example, to look exactly like the color picker in your picture snipit. You may need to play around with the styles for these elements. I added some flex display to easily center elements in their parents as well.

let color = document.querySelector('.colorPick')
let themeColor = document.querySelector('#theme-color')

const setColor = (colorSel, textSel) => {
  // change the value to the default color
  themeColor.value = color.value
  // event listener to change the text input value when the pickers value changes
  color.addEventListener('change', () => {
    return themeColor.value = color.value
  })
}

setColor(color, themeColor)
#demo {
  font-size: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-content: center;
}

#theme-color {
  border: 1px solid #d4d4d4;
}

#theme-color:focus {
  outline: none !important;
  border: 1px solid #d4d4d4;
}

.picker {
  display: flex;
  align-content: center;
  align-items: center;
  height: 22px;
  width: 32px;
  border-radius: 0 4px 4px 0;
  border: 1px solid #d4d4d4;
  background-color: #eee;
  padding-left: 1px;
  margin-left: -1px;
}

.colorPick {
  height: 16px;
  width: 31px;
  border: none;
}
<div class="form-group row">
  <label for="theme-color" class="col-sm-2 col-form-label font-weight-bold"></label>
  <div class="col-sm">
    <div id="demo">
      <!--// remove readonly attribute if you want users to be able to type in the color themselves //-->
      <input type="text" id="theme-color" class="form-control @error('theme-color') is-invalid @enderror" name="theme-color" value="#FFFFFF" readonly>
      <span class="picker"><input class="colorPick" type="color"></span>

    </div>
  </div>
</div>