CSS styling not working in a custom metabox

The metabox div gets an ID of ‘meta_’ + your metabox ID, thus:

Sorry, that was me looking at my own metaboxes, forgetting that I actually prefix them like that to differentiate the container from elements within the container 🙁

Let’s work through your code and see if we can find the answer.

First, your metabox has the id ‘wpptabs_company_details’, so the container has (as you originally stated before I messed you up!) an element ID ‘wpptabs_company_details’. Given nothing else, the following CSS should set the text colour of labels:

#wpptabs_company_details { color: red; }

So, I stick that into a file ‘css/admin.css’ inside a plugin folder, and I make a plugin with the following code in it:

class wpse_81783_metaproblems {

    public function __construct() {
        add_action('init', array($this, 'init'));
    }

    public function init() {
        add_action('add_meta_boxes_post', array($this, 'add_meta_boxes'));
        add_action('admin_enqueue_scripts', array($this,'wpptabs_enqueue_styles'));
    }

    public function add_meta_boxes() {
        add_meta_box('wpptabs_company_details', __('The Meta box name', 'wpptabs'), array($this, 'render_meta_content'), 'post', 'normal', 'high');
    }

    public function render_meta_content() {
        echo "<label> THIS IS TEST </label>\n";
    }

    public function wpptabs_enqueue_styles() {
        global $typenow;

        if ($typenow == 'post') {
            wp_register_style('wpptabs-config-table', plugins_url('css/admin.css'), null, null, false);
            wp_enqueue_style('wpptabs-config-table');
        }
    }

}

new wpse_81783_metaproblems();

Your code is for a custom post type, but I’ve stuck with ‘post’ just for simplicity. Note that I’ve cleaned up a couple of simple errors in your enqueue call: where you are passing 'null' and 'true', those are strings and should instead be null and true which are not the same. I also just used the function plugins_url() to locate the CSS file, which may be your problem. Otherwise, I’m not sure if I’ve really done much different. It works. I get a red label element in a metabox.

A couple of things come to mind here.

  1. look at my code, look at your code, and play “spot the difference”. Maybe it’s in that.
  2. go back to Chrome’s Inspect Element, and look at the right-hand column where it says “Styles”. It lists the CSS rules that apply to an element, including any that are overridden (which it shows by striking them out with a line through them). See if your rule is there, and if it is, is it overridden by something else.
  3. when you view source and see a link to your CSS file, click the link and see if it actually loads your CSS file!

Good luck!