What is the process for choosing a particular input element based on its size and type?

Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the input box:

<input type=text name=name value='Jason Bourne'> /*1st set*/
<input type=text name=cardNumber value='4111111111111111' size=19> /*2nd set*/

Can I differentiate the two sets without incorporating a class or id attribute, relying solely on CSS selectors?

To elaborate: the example used a size of 19, but I aim to distinguish between the presence and absence of the size attribute, combined with filtering for the text type attribute.

htmlcss

Answer №2

After being inspired by Dipak's answer, I decided to experiment on Fiddle and I finally found exactly what I needed:

input[type="text"] {
 color: blue;
}

input[type="text"]:not([size]) {
 width: 200px;
 color: red;
}

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 embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

javascriptphphtmlwindow.open

Optimizing images for typography in SEO

Dealing with font rendering issues across different platforms can be quite challenging (for example, Windows often has unsightly anti-aliasing, and TTF fonts are not anti-aliased at all). This led me to consider generating a separate PNG file for each head ...

htmlseo

Prevent using href for opening the browser when clicked

In the control, there is an href link that triggers a javascript function and passes a variable to it: <a href="<%#XPath("link").ToString()%>" onclick="return getLink(this)">Link</a> I'm looking for a way to prevent the browser fro ...

javascripthtmlhref

Field for user input featuring a button to remove the entry

I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing space with margin and padding in Bootstrap 5

I recently started experimenting with bootstrap 5, but I'm feeling quite disoriented. The layout I have created includes some blue elements (borrowed the sidebar from this source) and now I am attempting to replicate this design. https://i.sstatic.ne ...

cssbootstrap-5

The getText method in Selenium seems to be malfunctioning as it is unable to retrieve any text content from

Struggling to capture the text of WebElement using two different methods, but both are returning blank strings. // Method 1 d.findElement(By.id("deliveryDate")).getTex(); // Method 2 WebElement deliveryDate = d.findElement(By.id("deliveryDate")); Sys ...

htmlselenium

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...

css

Make sure the navigation bar is fixed to the top of the page only

Looking for a solution to stick the navigation menu to the top of the screen only when the screen is wider than 782px. Progress so far: https://jsfiddle.net/ah4ta7xc/1/ Encountering an issue where there is an unintended gap at the top when applying the s ...

jqueryhtmlcss

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

javascriptjqueryhtmlcssangularjs

Updating Navigation Bar Font

I am a novice in the process of constructing my own navigation bar for my website, and I am encountering difficulties when trying to customize the font (color, font-family, etc). Currently, the links in my navigation bar (such as home, contact, store, etc ...

htmlcsswordpressnavigationnavbar

Generate a unique identifier for the HTML content

Is there a more efficient way to assign unique id tags to certain words using vanilla javascript? For example: <p>All the king's horses ran away.</p> For instance, "All" would have the id "term1", "King's" would have "term2", and ...

javascripthtml

Steps for showcasing a automated slideshow

I'm currently working on creating a slideshow that automatically displays multiple images. While the first image shows up just fine, it doesn't seem to transition to the next one. var currentSlide = 0; displaySlides(); functio ...

javascripthtml

What is the best way to combine PHP with HTML in your code?

I am looking to display data from a database in a table format. Additionally, I want to include images sourced from the same database. Using AJAX, I have a function called getPosts that fetches data from getPosts.php and populates a table with it. Althou ...

phpjqueryhtmlmysqlajax

How can I retrieve the input value on the current page using PHP?

Hey there, so I'm pretty new to PHP and I have a question. Is it possible to retrieve the input value from an existing input field on a page using PHP when the page loads, and then assign that value to a variable? For instance, let's say I have ...

javascriptphpjqueryhtml

Customize CKEditor by automatically changing the font family when the page is loaded

How can I change the font-family of CKEditor to Meiryo based on a JavaScript boolean? I attempted this code in my custom JS within an if condition, but it did not successfully change the font-family: config.font_style = { element : 'span&apo ...

javascripthtmlcssfontsckeditor

Paginating: Restrict the page number for smaller screens

When viewing on a small screen device (> 641 px), my pagination should resemble https://i.sstatic.net/dSSUX.png Conversely, on screens that are medium-sized and larger (< 641 px), the pagination should appear as shown here: https://i.sstatic.net/C1E ...

jqueryhtmlcssjquery-pagination

Changing color of the collapsible icon and content when hovered over

Currently, I am working on creating collapsible content for a FAQ dropdown. The button has a 'plus' icon which changes to a 'minus' icon when clicked. My goal is to change the color of the pre-clicked 'plus' icon to white when ...

htmlcssbuttoncollapsable

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

javascripthtmlvue.js

Transferring the AJAX response into a JavaScript variable

New to AJAX and JS here. I am implementing an AJAX code that fetches data from a php service. I am trying to figure out how to store the returned data in a JavaScript variable, which I can then display on the UI. Below is my AJAX code snippet: <script ...

javascriptphpjqueryhtmlajax

Ensuring form input validity in real-time using jQuery's keyup event

I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...

javascriptjqueryhtmlcss