cakephp css issue

Question

I have one ctp file where my code is :--

<table>
    <tr>
        <td width="50%"><?php echo $this->Form->input('first_name'); ?></td>
        <td><?php echo $this->Form->input('middle_initial'); ?></td>
    </tr>
    <tr>
        <td><?php echo $this->Form->input('last_name'); ?></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <table>
                <tr><td colspan="3">Phone Number</td></tr>
                <tr>
                    <td><?php echo $this->Form->input('phone1', array('label' => false, 'type'=>'text','id' =>'phone1', 'maxlength' => 3)); ?></td>
                    <td><?php echo $this->Form->input('phone2', array('label' => false, 'type'=>'text','id' =>'phone2','maxlength' => 3)); ?></td>
                    <td><?php echo $this->Form->input('phone3', array('label' => false,'type'=>'text', 'id' =>'phone3','maxlength' => 4)); ?></td>
                </tr>
            </table>
        </td>
        <td>&nbsp;</td>
    </tr>
</table>

In my css :-

.contentWrp .input input{ height: 20px; width: 200px; border: 1px solid #12192c; font-size: 14px;}

But as you can see that on image it is using different css for textboxes. Even I tried to give common css for that in my ctp (html) file but it takes different css..

Help me!

Answer 1

CakePHP's $this->Form->input(...) generates its own html wrappers around the input control and also in the default installation includes a css file that styles it. You should try removing the default CakePHP css file first or view the source of the html generated and modify your css selector(s) accordingly.

Hope this helps.

Answer 2

Possibly the CSS selectors are not correctly defined. You global tag like

input{ height: 20px; width: 200px; border: 1px solid #12192c; font-size: 14px;}