样式化PHP表单<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 p php 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.

Answer 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; 
}

Answer 2

This should work

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

Answer 3

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;
}

Answer 4

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. });

Answer 5

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;
} 
?>

Answer 6

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;
}