css validation message for checkbox

My css library is overriding my checkbox style and it is causing the validation message to appear on the top left of the screen. I know the line of code causing this but I am unsure of how to fix it.

<input id="check" type="checkbox" class="color_checkbox t_grey" name="check" required="required" />

this line of code in the .css is causing it to override the checkbox square, but it ends up forcing the message to the top left

input[type="checkbox"]{
            display: none;
}

Without css line: http://ift.tt/2cfUlpt

With the css line: http://ift.tt/2bVcLbn (top left of my browser) With the css line however, there is only 1 checkbox unlike the previous picture

Thanks

• In the first picture where the validation message shows under the checkbox, I need that checkbox hidden so it only shows the grey one, which is what the display:none does, but I need the validation message under the new checkbox, not on the top left like in the second picture.