如何转换CSS以在输入类型中使用它?

时间:2015-11-08 20:12:11

标签: html css

我的代码需要一些帮助。我使用html代码允许我在单击提交按钮时发布信息。

我想在输入类型的提交中转换CSS代码,因为我使用了两种不同的输入类型' name'和'电子邮件'文本框所以当我点击提交按钮时,我想让它们一起工作。

以下是我目前使用的两种输入类型的代码:

 <input placeholder="Enter Your Full Name" name="name" id="name" class="elInput elInput100 elAlign_left elInputBR5 elInputIRight required0 elInputIName elInputIColor elInputStyle2 elInputBG2 elInputMid garlic-auto-save" data-type="extra" type="text"></div>

<input placeholder="Enter Your Email Address" name="email" id="email" class="elInput elInput100 elAlign_left elInputBR5 elInputIRight required0 elInputIColor elInputIEmail elInputBG2 elInputStyle2 elInputMid garlic-auto-save" data-type="extra" type="text"></div>

以下是提交输入类型的代码:

<input type="submit" value="SHOW ME THE VIDEO" maxwidth="470"/>

这是css:

input[type=submit] {
    width:89%;
    max-width:470px;
    display:block;
    margin:.05em auto;
    background: #ffef7d; /* Old browsers */
background: -moz-linear-gradient(top,  #ffef7d 0%, #ffdd57 79%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffef7d), color-stop(79%,#ffdd57)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffef7d 0%,#ffdd57 79%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffef7d 0%,#ffdd57 79%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffef7d 0%,#ffdd57 79%); /* IE10+ */
background: linear-gradient(to bottom,  #ffef7d 0%,#ffdd57 79%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffef7d', endColorstr='#ffdd57',GradientType=0 ); /* IE6-9 */
border:0px;
padding:.45em 2%;
    font-size:1.9em;
    text-align:center;
    color:#957a11;
        font-family: 'Roboto Condensed', sans-serif;
        cursor:pointer;
        -o-border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        font-weight:bold;
}

我想在输入类型的提交中使用CSS代码,这样我就可以看到按钮的颜色,大小,背景......等。

你能告诉我一个如何使用css代码转换它以允许我在提交的输入类型中使用它的例子吗?

1 个答案:

答案 0 :(得分:0)

HTML

<input type="submit" value='Submit me'>

<input class='my-submit-class' type="submit" value='Submit me'>

或 - 你可以把你的风格&#39; inline&#39; - 在这种情况下你的问题应该是,&#34;如何在我的HTML标记中使用CSS样式?&#34;

<input class='my-submit-class' 
       type="submit" 
       value='Submit me'
       style='color: red; display: inline-block;'>

(你必须了解显示:阻止;与内联相关以获得高度和某些要应用的东西)


CSS

input[type='submit'] {
    color: red
    /*
    property: value;
    */
}

.my-submit-class {
    color: red
    /*
    property: value;
    */
}

jsFiddle