Textfield style in Struts2 customization

How can I change the appearance of the textfield?

[https://i.sstatic.net/TkQ0i.png]

I am trying to remove the background color

The code snippet in question:

<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>

I have attempted various solutions without success, the interface remains unchanged. Can someone provide any guidance on how to achieve the desired result?

htmlcssstruts2

Answer №1

You can apply custom styling to all the Struts2 Form Tags by using CSS classes and inline styles with the attributes cssClass and cssStyle respectively.

For example:

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

After this, it becomes a matter of handling CSS.

Answer №2

.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);
}
   <s:textfield name="nom_pre" cssClass="enjoy-css" id="nombre" key="Nombre" placeholder="<%= pre.getNom_pre()%>"/

Cascading Style Sheets (CSS) can be utilized to design and customize various elements on your webpage, such as text boxes. is a useful resource for generating CSS code like the ones shown above.

In Struts2, if you prefer not to use pre-formatted tables typically generated for forms, you can opt for a simpler theme by following the example below:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position various images at specific coordinates on the screen using CSS

Looking for help with positioning four images on the screen using coordinates specified in the code. The top-left coordinate positioning is not displaying properly as intended. Can you assist in identifying and correcting the error? <!DOCTYPE html&g ...

htmlcssimage

Conceal navigation buttons on the first and last pages of the slider

I'm attempting to develop a slider that hides the "previous" button when it is on the first slide and hides the "next" button when it reaches the last slide. The slider will be created using a combination of PHP, forms, and JavaScript. Below is the H ...

javascriptphpjqueryhtmlslider

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

javascripthtmlcssbootstrap-5

Causing an element to extend beyond its parent element's boundaries

I have implemented Material Design Lite for creating cards on my website. I encountered an issue where the menu I added to the card only displays within the bounds of the card. I would like it to overflow similar to this example () Here is a link to my fi ...

htmlcssmaterial-design

Using discord.js within an HTML environment can add a whole new level of

I'm in the process of creating a dashboard for discord.js, however, I am facing difficulties using the discord.js library and connecting it to the client. Below is my JavaScript code (The project utilizes node.js with express for sending an HTML file ...

javascripthtmlnode.jsdiscord.js

I am attempting to rearrange the order of a specific div using the nth-child() selector in CSS within a media

I am struggling to rearrange the div elements and the nav class is not appearing in the media query when inspected. Seeking assistance from an expert. Here is the CSS code: @media screen and (max-width:810px) and (min-width:413px) { .nav:nth-child(2) ...

htmlcss

The Bootstrap navbar branding element vanishes upon navigating away from the home page

I have recently started learning Python, Django, and Bootstrap. I am facing an issue where the navbar-brand disappears when navigating to a different page or view other than the index. In my case, the nav-brand is an image source. Below is the code snippet ...

htmldjangodjango-templatesnavbootstrap-5

Text scrolls - items are shown all at once

I've been experimenting with creating moving/scrolling text. After some trial and error, I've managed to achieve this effect. If you're interested, you can check out the code on CODEPEN. The issue that's currently bothering me is rel ...

htmlcsstextscrollmove

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

ways to conceal the default icon in bootstrap navbar

I am looking to incorporate Bootstrap tags into my HTML file in order to display my menu items. However, I want to avoid having the default navbar highlight box and hamburger icon appear when users visit my site using a tablet or mobile device. <nav cl ...

htmlcsstwitter-bootstrapresponsive-design

The camera continues to move smoothly after the static-body effect has been activated

I recently implemented A-Frame physics using this library, and encountered an issue where applying static-body to the a-mixin voxel in the Minecraft demo still allowed my character to move through the box. My camera is configured with universal-controls f ...

htmlaframe

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

javascripthtmlcsswordpressprivacy

Display exclusively the provided value

Can someone please help me with printing in PDF style and displaying only the inputted value without showing the textbox or dropdown? Check out this image for reference I would like to achieve something similar, how can I do that? Any assistance would be ...

htmlcss

I'd like to eliminate everything following the .com

Hey there! I figured out how to remove the www and https from a URL, but now I want to get rid of anything after ".com", like this: www.something.com/something/something. My goal is to eliminate */something/something~ from the URL. <form method="post ...

phphtmlformsif-statementreplace

Create HTML elements based on the information in a JSON object

My goal is to create span elements for each word in my subtitle text, which is stored in a JSON object. Here is the JSON data I am working with: var sub_info = [ {'start': 3.92, 'end': 6.84, 'words ...

javascripthtmljquery

Troubleshooting CSS rendering issues on Chrome browser

Currently in the process of developing a new website based on an old template. The site appears as intended in IE, Safari, and Firefox, but for some reason Chrome is not rendering any of the css. Just to clarify, none of the links are functioning at this ...

htmlcssgoogle-chrome

I'm having trouble getting my website to align in the center of the

Struggling to center my website no matter what I try. I experimented with different CSS properties but haven't had much luck. margin: auto 0; I also attempted the following: margin-left: 50%; margin-right: 50%; The closest I got was aligning every ...

css

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss

Guide on making a JavaScript button with both "light and dark" modes

Currently, I am attempting to change the color scheme of the page by adjusting the :root variables using a function called changeBackgrondColor(). This function is then assigned to the fontAwesome moon "button". However, when I click on the moon, the pag ...

javascripthtmlcss

Exploring the use of the "++" operator in Regular

Is there a way to detect the presence of ++, --, // or ** signs in a string? Any help would be greatly appreciated. var str = document.getElementById('screen').innerHTML; var res = str.substring(0, str.length); var patt1 = ++,--,//,**; var resul ...

javascripthtml