2015-09-01 76 views
0

我试图修改我的wordpress网站上的忍者表单文本输入的宽度。我可以通过ID单独呼叫每个人:wordpress自定义css类

#ninja_forms_field_6 {width:25%; min-width:250px;} 

但是,我想按班上课。但是,我似乎无法弄清楚正确的课程。我已经看了看源代码,并显示:

<input id="ninja_forms_field_6" data-mask="" data-input-limit="" data-input-limit-type="char" data-input-limit-msg="character(s) left" name="ninja_forms_field_6" type="text" placeholder="First Last" class="ninja-forms-field ninja-forms-req " value="" rel="6" /> 
    <div id="ninja_forms_field_6_error" style="display:none;" class="ninja-forms-field-error"> 
    </div> 

当我试着使用:

.ninja-field ninja-forms-req {width:25%; min-width:250px;} 

好像没有什么改变。特别是,我的css编辑似乎并不喜欢ninja-field和ninja-forms-req之间的空间。我发现了一些其他的答案,这些答案是两个单独的标签,但我似乎仍然无法获得文本输入来响应我的输入。我应该注意到,我正在使用“Simple Custom CSS”插件对CSS进行更改。提前任何帮助,将不胜感激。谢谢。

+0

'ninja-forms-req'是元素还是类? – Roope

+0

这是班。它似乎是由空格分隔的两个类。 – elpuga

回答

1

尝试.ninja-field.ninja-forms-req

当在同一元素上定位多个CSS类时,需要使用句点分隔它们。

+0

谢谢你的回答。我试过了:.ninja-forms-field.ninja-forms-req {width:25%; min-width:250px}但它没有工作。 – elpuga

+0

您是否尝试在规则上投掷“!important”? –

+0

假设.ninja-forms-field.ninja-forms-req {width:25%; min-width:250px!important;}是正确的语法,但它也没有工作 – elpuga

0

我发现这个功能非常适合忍者的形式以及他们在某些主题中按钮宽度的问题。这也解决了我使用自定义css插件的问题。根据你的主题按钮高度使用高度。

.ninja-forms-field { 
    width:100%!important; 
    height:50px!important; 
}