Is there a way to make wordpress default color picker (iris) showed up over form and text using wordpress api?

Its inline display messing up the administration page of my plugin each time the color picker box showed up.

  • Show the relevant parts of your code.
    – brasofilo
    Sep 15, 2013 at 10:23
  • Screenshot might be in order as well when dealing with display issues.
    – Rarst
    Sep 15, 2013 at 11:32

2 Answers 2


I found the answer.

SO, there is no need to use wordpress api to make the color picker box showed up over another elemnn/s when the 'Select color' button is clicked.

Just add this css code to your plugin/ theme administration css file:

div.wp-picker-holder {
z-index: 999 !important;
position: absolute !important;

Here's the full documentation on Iris. There you can see that you can set a "target" for where the actual pallette appears with a DOM element.

Here's a sample code:

Your JS:

target: '#colorpickertarget'


<input class="color-picker" type="text" />
<input type="submit"></form>
<div id="colorpickertarget"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.