What is the best way to target the last-child of an input field using

Apologies if this is a duplicate post. I am having trouble finding a solution to my issue. I have a div tag that includes 2 ASPXButtons. When the code is run, it renders an input[type="submit"] tag. The first input tag works fine, but the last one can't inherit CSS. Here is my code:

ASPX

<div class="loginButton">
  <div style="float:left; margin-left:-9px;">
      <input type="checkbox" id="on_off" name="remember" class="on_off_checkbox" value="1" />
      <span class="f_help">Remember me</span>
  </div>
  <div class="pull-right" style="margin-right:-8px;">
      <div class="btn-group">
        <dx:ASPxButton AutoPostBack="false" ID="but_login" CssClass="btn" Native="true" EnableDefaultAppearance="false" runat="server" Text="Login">
        </dx:ASPxButton>
        <dx:ASPxButton ID="forgetpass" CssClass="btn" Native="true" EnableDefaultAppearance="false" runat="server" Text="Forget Pass"></dx:ASPxButton>
      </div>
  </div>
  <div class="clear"></div>
</div>

CSS

.btn-group > .btn.large:first-child {
  margin-left: 0;
  -webkit-border-bottom-left-radius: 6px;
          border-bottom-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
          border-top-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-topleft: 6px;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 6px;
          border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
          border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
}

Can anyone spot what's wrong in my code?

Answer №1

The CSS styles you are using do not correspond with the classes in the Asp code.

Answer №2

give this a shot

<style type="text/css>
    .btn-group > .btn:first-child
    {
        margin-left: 0;
        -webkit-border-top-left-radius: 6px;
        border-top-left-radius: 7px;
        -webkit-border-bottom-left-radius: 6px;
        border-bottom-right-radius: 7px;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-bottomright: 6px;
    }

    .btn-group > .btn:last-child
    {
        -webkit-border-top-right-radius: 8px;
        border-top-right-radius: 9px;
        -webkit-border-bottom-right-radius: 10px;
        border-bottom-right-radius: 11px;
        -moz-border-radius-topright: 12px;
       -moz-border-radius-bottomright: 13px;
    }
</style>

Answer №3

Include an additional CssClass in the 2nd div example.

<dx:ASPxButton ID="forgotPassword" CssClass="button customClass" Native="true" EnableDefaultAppearance="false" runat="server" Text="Forgot Password"></dx:ASPxButton>

Next, update the CSS file with the following:

.customClass
{
//your styles here
} 

Answer №4

One way to implement this idea is by using css....

input[type="checkbox"]:last-child {margin-left:20px;}

input[type="radio"]:last-of-type:checked:after{background-color:#000;}

Take note of the :last-of-type pseudo-class

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

Tips for displaying "No Results" without causing any lag in the browser

I'm encountering difficulty trying to implement a simple feature without resorting to a "messy" solution. The performance is suffering, and I am certain it's not done in a "professional" manner. What I desire is straightforward – displaying a ...

Creating a sleek and stylish panel with a static horizontal table size in Bootstrap 3.0

I'm having trouble with the nested table staying a static large size while the panel decreases as I resize my browser. Any tips on how to fix this? <div class="panel panel-primary"> <table class="table"> ... Here is an exampl ...

Bootstrap 4 ordering feature is non-functional

I am looking to rearrange the layout for Desktop and mobile devices, currently this is how it's structured: On Med+ : https://i.sstatic.net/E9ZHo.png On small: https://i.sstatic.net/VG6j1.png The placement on Desktop is fine. However, on mobile I ...

Troubleshooting slow queries with a large volume of returned rows

I am facing performance issues with my MVC site that is connected to a SQL Server database table containing approximately 3 million records. When I try to display data from this table on a page, the query takes about 25-30 seconds to return around two thou ...

Is there a way to launch an android application directly from my website using a pop-up box?

I attempted to utilize the following code: intent://my_host#Intent;scheme=my_scheme;action=my_action; and it appears to be functioning properly. However, I am in need of a dialog box similar to this image. Can anyone assist me with achieving this? Thank ...

When applying a background color with Bootstrap 4, the card borders may appear inconsistent or distorted

(Customizing Bootstrap 4.1.3) I am currently working on personalizing a card design. Initially, I added border-danger <div class="row"> <div class="col"> <div class="card border-danger"> <div class="card-heade ...

Unable to reveal hidden text with invisible formatting (font-size: 0)

I have a Joomla 3 website where I created a blog using a design-controll template. I made a "new-article" page but realized that some buttons were missing text. Upon inspecting with Firebug, I found that there was a font-size:0 property causing this issue. ...

"Efficiently managing Nuget dependencies, including handling transitive dependency versions

My inquiry pertains to Nuget and its management. Consider two scenarios: I currently have two Nuget packages, A and B, in my application. They both rely on package C, but I have not explicitly included C in my application. Scenario 1: A relies on C vers ...

SQL Delete rows from Table

I am dealing with an issue where a table displaying notices has a clear option next to each row, but when the clear button is clicked nothing happens. The setup involves a button that triggers a clear function. What could be causing this problem? <bu ...

Determining the worth of radio buttons, dropdown menus, and checkboxes

I am working on designing a menu for a pizza place as part of a learning project. The menu allows users to select their pizza size from small, medium, and large using radio buttons, and then customize it further with three select boxes where each selection ...

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

The C# task has been terminated

Every now and then, I encounter the error message "Task was canceled" and I'm struggling to pinpoint the root cause of this issue. Unfortunately, the error message doesn't provide much information to work with. Despite my efforts to research on v ...

Can LoginAction be distinguished from FormsAuthentication.SignOut()?

Initially, I had been utilizing the logout action that was automatically generated by the Web Forms project in Visual Studio (I understand that Web Forms is no longer the preferred method, but I require it for a legacy component of code): <asp:LoginStat ...

Error Encountered: Sharepoint File Not Found

I am facing difficulty in finding relevant information about this particular exception. It seems to occur sporadically on a specific website, any suggestions? [FileNotFoundException]: File Not Found. at Microsoft.SharePoint.ApplicationRuntime.SPLocal ...

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

Determine the upper limit for selecting a date on the

I have a problem with setting the date range in two calendars. The first calendar is for selecting the starting date, and the second one is for selecting the ending date. I want to restrict the maximum date selection in the second calendar to be three mont ...

Upgrading from version 2.44 to version 2.46 of Selenium.Webdriver results in a NullReferenceException being

In our company, we have recently implemented the use of Appium for automating tests on websites and web apps. Previously, I have experience using Selenium and Nunit to test simple websites on desktops, utilizing attributes like [Test], [TestCase], and [Tes ...

The height of the TinyMCE editor refuses to adjust

Hello, I'm new to utilizing Tinymce within an AngularJS environment. Specifically, I am working with the Tinymce library version 4.3.13. I have constructed some HTML and angularJS code to implement the Tinymce editor, but I've encountered a probl ...

Unable to apply margin right to React Material-UI table

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used: <TableContainer> <Table sx={{ mr: 100 }} aria-label="customized table"> <TableHead> <Tabl ...

Container filled with AGM Maps

Currently, I am working with angular2 and the Google Maps component from . The issue I am trying to address is the need for the map to fill my container div. For example: <div id="container" style="height:100%; width: 100%"> <agm-map></agm- ...