Попытка стилизовать кнопку отправки отдельно от других входов

Question

Прежде всего, это, вероятно, глупый вопрос, но я новичок и все еще немного разбираюсь в CSS. Я пробую CakePHP и использую его помощник для создания формы. Это выглядит примерно так:

<p><?php echo $this->Form->input('email');?></p>
<?php echo $this->Form->submit('contact.gif');?>

Который производит:

<p>
    <div class="input text">
        <label for="CharityEmail">Email</label>
        <input name="data[Charity][email]" 
               type="text" 
               maxlength="255" 
               id="CharityEmail" />
    </div>
</p> 
<div class="submit">
    <input type="image" src="/raisin/img/contact.gif" />
</div>

В моем CSS я хочу, чтобы поля ввода имели ширину 255 пикселей, но если я это сделаю, то кнопка отправки тоже станет больше. Кроме того, я бы хотел, чтобы вокруг полей ввода была рамка, а не кнопка отправки, что тоже является проблемой.

Как я могу по-другому оформить кнопку отправки? Какой правильный путь в CakePHP?

Answer 1

Это должно работать. Здесь вы указываете тип как текст.

input[type=text] { width:255px; }

Answer 2

Вы можете использовать:

input[type=text] {width: 255px;}

Или, если вы нацелены на IE6, похоже, вы могли бы использовать:

div.text input {width: 255px;}

Answer 3

Лучший подход к этому специфическому для CakePHP приведен ниже.Я бы сделал это, добавив атрибут class к моим входным текстовым элементам.

<?php echo $this->Form->input('email', array('class' => 'yourButtonClass'));

Тогда в вашем CSS-файле вы определите следующее:

.yourButtonClass { width: 255px; }