Customize the appearance of input elements within nested divs

Concerning my webpage:

<div class="loginpage-form">

  ...some content

  <form>
  <div class="flexwrapme">
    <input type="text"... />
  </div>

  <input type="submit".../>
  </form>


  <!-- Do not style inputs from the form below -->
  <form>
    <input type="text"... />
  </form>

</div>

This is a simple query, but I am unsure: How can I properly design only the input types "text" or "email" within the loginpage-form > flexwrapme containers?

I tried the following code, but I'm not totally convinced... :

.loginpage-form .flexwrapme input[type="text"],
.loginpage-form .flexwrapme input[type="email"] {
  apply styles...
}

Is this code correct?

Cheers! Pat

Answer №1

There is no requirement to include .loginpage-form in your styling, just the following will suffice

.flexwrapme input[type="text"],.flexwrapme input[type="email"]{
    // add your style here
}

Alternatively, a simpler approach would be to assign classes directly to your input elements and apply styles accordingly

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

How can I reset the alternating table row in a new table using CSS?

I am encountering an issue with alternating row colors in my tables. Even though I have two separate tables, the tr:odd rule is being applied across both tables. Below is the HTML for my tables: <table class='myTable'> <tr class=&a ...

Navigate a Bootstrap 4 drop-down menu by scrolling rather than having it drop down

I recently designed a Navbar with dropdown menus, but I have encountered an issue where the dropdown menus do not overlay the content as intended. Instead, they create a scroll-down menu and display the contents within it. I would appreciate it if someone ...

The form is functioning properly on mobile devices but is currently experiencing issues on the server

Everything runs smoothly when accessing the website and using the form on localhost. However, once it's uploaded to a server, the form only functions correctly on desktop devices. On mobile, the form fails to filter and displays all professionals inst ...

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

Tips for controlling design elements in ReactHow to effectively manage styling in

Currently, I am diving into the world of React and have noticed a significant amount of style changes being done within JavaScript. Traditionally, styles are managed through CSS files, but I am uncertain if this same practice applies to React. What is co ...

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

Tips for perfectly aligning heading both horizontally and vertically

https://i.sstatic.net/8ttSh.png https://i.sstatic.net/vSsH5.png My website has a header with text that I want to center both horizontally and vertically. I am currently using the 'text-center' class in Bootstrap 4, which centers the text but onl ...

Struggling to achieve a responsive design on a webpage despite using bootstrap. Having difficulty creating a responsive layout with containers and columns

I'm fairly new to this and I've experimented with containers and rows, dividing the columns as needed. While my current setup displays a nice webpage on my pc, it still lacks responsiveness. I understand that using media tags could solve the issu ...

Is it possible to implement a custom radio tab index without using JavaScript

Is it possible to apply the tabindex attribute on custom radio buttons, hide the actual input element, and use keyboard shortcuts like Tab, Arrow Up, and Arrow Down to change the value? Check out this example on StackBlitz ...

Bootstrap grid shifting

Having an issue with configuring one of my bootstrap hero units to respond properly to an offset command: <div class="col-xs-6-offset-3 col-md-6-offset-3 col-lg-6-offset-3"> <div class="center hero-unit"> <h1>text</h1> ...

Can I use javascript/jquery to alter the direction of text in each line?

Looking for assistance with changing text direction on each new line. For instance: text left-to-right text right-to-left text left-to-right text right-to-left... etc. I would like the text direction to change with each word-wrap: break-word. Any help w ...

Utilize CSS to display metadata above the text

Is there a way to visually represent parts of speech data in CSS for text that has been tagged with such classifications? Take the sentence Ten pins were set in order., which, when parsed using Spacy, results in: token pos 1 Ten NUM 2 pins NOUN 3 ...

Horizontal Accordion Design for Cascading Style Sheets (CSS) Books

I am currently working on developing a page that features a book layout. This page will include tabs that users can expand individually. If you would like to see a working example, you can check out this link: https://codesandbox.io/s/book-layout-l28gh?fi ...

The right column in Bootstrap is covering up the left column

Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size ...

What is the best way to ensure that two elements remain side by side?

Here is the HTML code I'm working with: .parent{ border: 1px solid; width: 70%; } .title{ width: 50px; } .input { } <div class="parent"> <span class="title">title: </span> <input class="input" name="title" type="tex ...

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

overrule styling in react native

In React Native, I am looking to modify a specific style within a sub-component. For instance, I have defined a style called CircleShapeView: const styles = StyleSheet.create({ CircleShapeView: { width: 50, height: 50, borde ...

Stop CSS from being overridden

Currently, I am working within the Liferay portal using the Google Charts framework. For those unfamiliar with Liferay, it essentially consists of standard JSP's but incorporates its own built-in stylesheets. I have encountered a situation where my c ...

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...