diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index ffbebee4771..ae618504a0c 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -28,9 +28,6 @@
     }
     .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div  {
         border: 1px solid black;
-        &:focus-within {
-            border-color: $o-we-sidebar-content-field-input-border-color;
-        }
     }
     .o_color_picker_inputs {
         font-size: 10px;
@@ -39,10 +36,6 @@
             font-family: monospace !important; // FIXME: the monospace font used in the editor has not consistent ch units on Firefox
             height: 18px;
             font-size: 11px;
-            border: none;
-            &:focus {
-                outline: none;
-            }
         }
         .o_hex_div input {
             width: 7ch;
diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml
index 1aaf6718249..23b35846bcf 100644
--- a/addons/web/static/src/xml/colorpicker.xml
+++ b/addons/web/static/src/xml/colorpicker.xml
@@ -16,7 +16,7 @@
         </div>
         <div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
         <div class="o_color_picker_inputs d-flex justify-content-between mb-2">
-            <t t-set="input_classes" t-value="'p-0 text-center text-monospace bg-transparent text-white'" />
+            <t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent text-white'" />
 
             <div class="o_hex_div bg-black-50 px-1 d-flex align-items-baseline">
                 <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 8c6b62ac461..89a9de5779b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1517,6 +1517,21 @@ body.editor_enable.editor_has_snippets {
         @extend %we-generic-button;
     }
     .o_colorpicker_sections {
+        .o_colorpicker_widget {
+            .o_hex_div, .o_rgba_div  {
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+            }
+            .o_color_picker_inputs {
+                input {
+                    border: none;
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
+        }   
 
         .o_we_color_btn, .o_we_color_combination_btn {
             float: left;