Question

为什么文本字段看起来像这样？

[https://i.stack.imgur.com/TkQ0i.png]

我想消除背景颜色

具体代码：

<s:form action ="Update_datos_XML">
        <s:hidden id="id" name="id_sesion" value="%{#session.Sesion_usuario.id_sesion}"/>
          <div style="font-family:Arial;color: #af2d2d; background-color: rgba(0,0,0,0.1)">
            <span>
              <s:textfield name="nom_pre" id="nombre" key="Nombre" placeholder="<%= pre.getNom_pre()%>"/>
            </span>
            <s:textfield label="Apellido paterno" name="app_pre" placeholder="<%= pre.getApp_pre()%>"/>
            <s:textfield label="Apellido materno" name="apm_pre" placeholder="<%= pre.getApm_pre()%>"/>

          </div>
          <s:submit cssClass="btn btn-success" value="Actualizar Datos"/>
        </s:form>

我尝试了很多东西，但没有结果，它仍然看到相同，我不知道该怎么做。

有什么建议吗？

Answer 1

所有Struts2 Form Tags都可以使用CSS类和CSS内联样式进行样式设置，分别使用属性cssClass和cssStyle。

示例：

<s:textfield name="nom_pre" cssClass="mytext" cssStyle="width:80%;margin-right:5px;"/>

从现在开始是一个CSS问题。

Answer 2

＆＃13;

.enjoy-css {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 6px 20px;
  border: none;
  -webkit-border-radius: 32px / 54px;
  border-radius: 32px / 54px;
  font: normal 18px/normal "Coda", Helvetica, sans-serif;
  color: rgba(0,142,198,1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(252,252,252,1);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  background-color:pink;
}

.enjoy-css:hover {
  background: rgba(232,249,255,1);
  -webkit-box-shadow: 0 2px 2px 0 rgba(90,90,90,0.2) inset;
  box-shadow: 0 2px 2px 0 rgba(90,90,90,0.2) inset;
}

.enjoy-css:focus {
  background: rgba(255,253,232,1);
}

＆＃13;

   <s:textfield name="nom_pre" cssClass="enjoy-css" id="nombre" key="Nombre" placeholder="<%= pre.getNom_pre()%>"/

＆＃13;

css可用于自定义文本框和其他元素。 http://enjoycss.com/start有助于生成更高或更好的CSS

在struts2中如果您不想使用为表单生成的预格式化表格，请使用主题简单如下

<s:set name="theme" value="'simple'" scope="page" />
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
    <head>
              <title>Test page</title>
    </head>
    <body>
       <s:textfield name="name"  id="name"/>
       <s:textarea name="address" id="address"/>
  </body>
 </html>

textfield strust2中的样式

2 个答案: