styling a php form <input type="submit">

Question

So I am trying to add some CSS styles to a php form I have the following CSS

#button {
  font-size: 14;
  border:none;
  width:20ex;
  height:10ex;
  outline: none;
}

which I would like to add this to the form which is constructed within the pphp element of the web page using the id="button" attribute.

From what I have read this should work.

$list = '';
while($row = $result->fetch_assoc()){
$title = $row['title'];
$id = $row['id'];
$summary = $row['summary'];
//I'm assuming you want each link to be different here...
$list.='<div class="Select_Course"><form name="courseselect" method="post" action="selectedcourse.php">
        <input type="submit" name="subsearch" value="' .$title. '" id="button">
        <input name="submitcourseselection" type="text" value="'.$title.'"hidden> 
        </form>
        <p>' . $summary . '</p></div>';
}

However it does not apply the style #button from the CSS to this button.

How would i do this?

Thanks in advance.

However it does not apply the style from the CSS to this button. All of the styles? only one? few? — Mosh Feu
– Mosh Feu, Commented Apr 17, 2016 at 14:42

Rasik · Accepted Answer · 2016-04-17 15:18:21Z

1

You can change your css submit to this. Instead of using an id button

input[type=submit] {
    padding:5px 15px; 
    font-size: 14px;
    border:none;
    width:20ex;
    height:10ex;
    outline: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}

edited Apr 17, 2016 at 15:18

Rasik

9131 gold badge11 silver badges31 bronze badges

answered Apr 17, 2016 at 14:48

claudios

6,6768 gold badges51 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

bdg Over a year ago

so the css file would look like #button input[type=submit] or just input[type=submit]?

Mark Eriksson Over a year ago

Still wouldn't work because ex is not a CSS measurement unit.

claudios Over a year ago

@MarkEriksson Sorry I just copied the css given and didn't noticed that. my bad

claudios Over a year ago

@bdg just input[type=submit]

claudios Over a year ago

If it helps add up. Thanks

|

score 1 · Accepted Answer · 2016-04-17 15:07:07Z

1

This should work

input[type="submit"] {
    font-size: 14;
    border:none;
    width:5em;
    height:2.5em;
    outline: none;
}

edited Apr 17, 2016 at 15:07

answered Apr 17, 2016 at 15:00

user3701904

2 Comments

Mark Eriksson Over a year ago

Still wouldn't work because ex is not a CSS measurement unit.

user3701904 Over a year ago

@mark-eriksson rofl, i didnt read his css code just edited the selector :P you're right. It should be px or em ..

Mark Eriksson · Accepted Answer · 2016-04-17 15:05:50Z

0

Your issue was your CSS measurement unit, ex is not valid in CSS. Perhaps you meant px or em but I'm guessing px by the value size you provided. This should do the trick

#button {
  font-size: 14px; /*added px*/
  border:none;
  width:20px; /*changed to px*/
  height:10px; /*same as above*/
  outline: none;
}

answered Apr 17, 2016 at 15:05

Mark Eriksson

1,47510 silver badges19 bronze badges

Comments

darkrider · Accepted Answer · 2016-04-17 15:09:23Z

0

try to use button tag and then add css to it's id. You can execute action on button click by javascript $(#yourid).click(function(){ //you action goes here. });

answered Apr 17, 2016 at 15:09

darkrider

527 bronze badges

Comments

RU Ahmed · Accepted Answer · 2016-04-17 15:19:23Z

Following code is working for me in Firefox(For this example i am using $i since I do not know your Database and i have change the font-size to 15 and echo the list)

<style>
#button{
font-size: 15;
border:none;
width:20ex;
height:10ex;
outline: none;
}
</style>

<?php
$list = '';
$i=0; //For this example i am using $i since I do not know your Database 
while($i<6){
$title = 'Title-'.$i;// change this to your database variable $row['title']
$id = $i;// change this to your database variable $row['id']
$summary = 'Summary: '+$i;// change this to your database variable $row['summary']
//I'm assuming you want each link to be different here...
$list.='<div class="Select_Course">
    <form name="courseselect" method="post" action="selectedcourse.php">
    <input type="submit" name="subsearch" value="' .$title. '" id="button">
    <input name="submitcourseselection" type="text" value="'.$title.'"hidden> 
     </form>
    <p>'.$summary.'</p>
    </div>';    
$i++;   

echo $list;
} 
?>

r1programmer · Accepted Answer · 2019-10-22 12:10:45Z

0

You can use id also, but in CSS you need to add this code:

input[id="button"] {
    font-family: "Calibri";
    font-size: 18px;
    background-color:#FF4500;
}

answered Oct 22, 2019 at 12:10

r1programmer

1

Collectives™ on Stack Overflow

styling a php form <input type="submit">

6 Answers 6

7 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related