Question

http://stepladderuk.com/dev/wedding/exp/

输入按钮中的文字是粗体，我不想要。

我无法弄清楚是什么让它变得大胆。

当我检查元素时，我想出了我在CSS中声明的font-weight：100。

我试过-webkit-appearance：none;

这会产生一种奇怪的行为，当你悬停时，文本只会解开。

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>

        <!-- meta stuff -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Matt &amp; Caroline</title>
        <meta name="description" content="Description here">
        <meta http-equiv="cleartype" content="on">

        <!--FONT LINKAGE -->
        <link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/c020518f-a748-4829-83c4-9cd0e83dd476.css"/>

        <!-- Stylesheet -->
        <link rel="stylesheet" href="css/main.css">

        <!-- Scripts -->
        <script src="js/modernizr-2.6.2.min.js"></script>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOJWH6GtBIMO1GGByFIf3A9Q6nEe050L0"></script>







    </head>
    <body class="homepage">




        <!--IE notice -->
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->













        <section id="rsvp">

            <div class="container">

                <div class="heading-holder">
                    <div class="heading-inner">
                        <img class="arrow-left" src="img/arrow-right.png" alt="arrow">
                            <h1>rsvp</h1>
                            <img class="arrow-right" src="img/arrow-left.png" alt="arrow">
                    </div>
                </div>




                <div class="inner">


                        <form action="MAILTO:bz@stepladderuk.com" method="post" enctype="text/plain">

                            <div class="col col-wide">
                                <div class="form-group">
                                    <label class="form-row" for="name">Names of everyone in your party</label>
                                    <span class="form-row text-small">Please seperate names with a comma.</span>
                                    <input class="form-row" type="text" name="name">
                                </div>

                                <div class="form-group">
                                    <label class="form-row" for="number">Your phone number</label>
                                    <input class="form-row" type="text" name="number">
                                </div>

                                <div class="form-group">
                                    <label class="form-row" for="email">Your email address</label>
                                    <input class="form-row" type="text" name="email">
                                </div>


                                <div class="form-group">
                                    <label class="form-row" for="dietary-requirements">Special dietary requirements</label>
                                    <input class="form-row" type="text" name="dietary-requirements">
                                </div>

                                <div class="form-group">
                                    <label class="form-row" for="song">Favourite song</label>
                                    <input class="form-row" type="text" name="song">
                                </div>

                                <div class="form-group">
                                    <label class="form-row" for="transport">Transport</label>
                                    <span class="form-row text-small">Please indicate if travelling by coach whether you will need transport to the venue and which coach you will return on</span>
                                    <input class="form-row" type="text" name="transport">
                                </div>
                            </div>



                            <div class="clear"></div>

                            <hr class="hr-2-em" />

                            <p>
                                <span class="text-small">
                                    Please fill out this form, click send and send the automatically generated email.
                                </span>
                            </p>


                            <div class="col-wide">
                                <div class="link-style-2 center">
                                    <span class="left-edge"></span>
                                        <input class="text" type="submit" value="Send It!">
                                    <span class="right-edge"></span>
                                </div>
                            </div>

                        </form>



                </div><!-- end inner -->

                </div><!-- end container -->

        <div class="clear"></div>
        </section>



    </body>
</html>

CSS;

form{
    z-index:100;
    width:50%;
    margin:0 auto;
    .form-group{
        margin-bottom:2em;
    }
    .form-row{
        display:block;
    }

    input[type=text]{
        border:0;
        background-color:white;
        padding:.4em;
        width:100%;
        font-family:$font-main, georgia, serif;
        width:100%;
        margin-top:.2em;
    }
    input[type=submit]{
        font-family:$font-main, georgia, serif;
        border:0;
        font-weight:100;
        -webkit-appearance: none!important;
    }
}

这是否在除IE之外的所有浏览器中。我在Mac上。

这就是它的样子;

this is the problem, too bold

它应该是这样的（这是网站上的另一个按钮，但它只是一个简单的链接，而不是表单输入元素）

How it should look

我很确定问题是因为它是一个输入。

Answer 1

为什么不申请正常？

input{
  font-weight: normal;
}

Answer 2

我找到了解决办法。

input{
    -webkit-font-smoothing: antialiased;
}

您需要在输入中添加-webkit-font-smoothing: antialiased;。

如果您已将此添加到html或body元素，则此规则将对页面上除输入之外的每个元素起作用，因此您需要重新声明它。

输入按钮无法解开文本

2 个答案: