如何在选择标记内添加类

时间:2018-08-25 11:39:37

标签: html css

我有以下注册表格,但只需要为select标签添加行高,我认为这就像在每个select标签中添加类一样简单,如下所示:我尝试执行以下操作,但没有这样做“行不通...我认为以下内容应行,但是您可以在select标记内创建一个类吗?。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

Widget searchAndAddRow = Container(
  padding: const EdgeInsets.all(0.0),
  child: Row(
    children: [
      Icon(const IconData(0xe8b6, fontFamily: 'MaterialIcons')),
      new Container(
        width: 80.0,
        child: TextField(
          decoration: new InputDecoration(
              border: const UnderlineInputBorder(), hintText: 'search'),
        ),
      ),
      new Expanded(
        child: new Row(mainAxisAlignment: MainAxisAlignment.end, children: [
          new IconButton(
            icon: new Icon(const IconData(0xe148, fontFamily: 'MaterialIcons')),
            tooltip: 'Add a new item!',
            onPressed: null,
          ),
        ]),
      )
    ],
  ),
);

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Material App Title', // App title
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('App Bar Title (Home)'),
          ),
          body: ListView(
            children: [
              //Row 1 contains: Search and Add
              searchAndAddRow
              //Row 2 contains: List
              //Row 3 contains: Sort dropdown
            ],
          )
       ),
    );
  }
}
.signup-form .subscriptionplan {
  line-height: 90px;

}

如果添加

,我可以设法使其正常工作

 <form class="signup-form" action="includes/signup2.php" method="POST">
         <label>First name</label>
         <br></br>
         <input type="text" name="first"  placeholder="First Name">
         <br></br>
         <label>Last name</label>
         <br></br>
         <input type="text" name="last"  placeholder="Last Name">
         <br></br>
         <label>E-Mail</label>
         <br></br>
         <input type="text" name="email" placeholder="Email">
         <br></br>
         <label>Username</label>
         <br></br>
         <input type="text" name="uid" placeholder="User ID">
         <br></br>
         <label>Password</label>
         <br></br>
         <input type="password" name="pwd" placeholder="Password">
         <br></br>
         <label>Referral</label>
         <br></br>
         <input type="text" name="referral" placeholder="referral">
         <br></br>
         <label>Basic Subscription Plan</label>
         <br></br>
         <select name="freelesson">
            <option value="Primer Level">Primer Level: Free</option>
         </select>
         <br></br>
          <label>Premium Subscription Plan 1</label>
          <br></br>

         <select name="subscriptionplan" class="subscriptionplan">
            <option value="">Choose Subscription Plan 1</option>
            <option value="None">None</option>
            <option value="Level 1">Level 1</option>
            <option value="Level 2">Level 2</option>
            <option value="Level 3">Level 3</option>
         </select>
         <br></br>
         <select name="pricing_level1" class="subscriptionplan">
          <option value="">Choose a price plan for Level 1</option>
          <option value="None">None</option>
          <option value="100">Monthly:$100</option>
          <option value="800">Yearly:$800</option>
          </select>
        <br></br>
        <select name="pricing_level2" class="subscriptionplan">
          <option value="">Choose a price plan for Level 2</option>
          <option value="None">None</option>
          <option value="150">Monthly:$150</option>
          <option value="1300">Yearly:$1300</option>
          </select>
          <br></br>
          <select name="pricing_level3" class="subscriptionplan">
          <option value="">Choose a price plan for Level 3</option>
          <option value="None">None</option>
          <option value="200">Monthly:$200</option>
          <option value="1800">Yearly:$1800</option>
          </select>
         <br></br>
         <button type="submit" name="submit">Sign up</button>

在所有select标记之前,但我认为我应该能够在select标记内使它起作用?我不能在班上上课吗?我可以制定.signup形式的.subscriptionplan吗?

1 个答案:

答案 0 :(得分:1)

您可以通过以下方式实现此目的:将带有虚线的选项放在选项中,并使其在您想要的行之间变为不可选择状态。

<select name="subscriptionplan" class="subscriptionplan">
            <option value="">Choose Subscription Plan 1</option>
            <option value="None">None</option>
             <option disabled="disabled">-------</option>
            <option value="Level 1">Level 1</option>
            <option value="Level 2">Level 2</option>
            <option value="Level 3">Level 3</option>
         </select>

或者您可以使用HTML UTF-8框水平绘制灯光,像这样-

<select name="subscriptionplan" class="subscriptionplan">
                <option value="">Choose Subscription Plan 1</option>
                <option value="None">None</option>
                 <option value="" disabled="disabled">&#9472;</option>
                <option value="Level 1">Level 1</option>
                <option value="Level 2">Level 2</option>
                <option value="Level 3">Level 3</option>
             </select>

或仅复制粘贴此-

<select name="subscriptionplan" class="subscriptionplan">
                <option value="">Choose Subscription Plan 1</option>
                <option value="None">None</option>
                 <option value="" disabled="disabled">──────────────────</option>
                <option value="Level 1">Level 1</option>
                <option value="Level 2">Level 2</option>
                <option value="Level 3">Level 3</option>
             </select>