CODEWITHSUNDEEP
htmlcss
Arbiter
Arbiter

Reputation: 433

How to add an attribute other than style attributes to css?

I am working on a html/css/javascript program which you can solve sudokus that the program generates, like an online puzzle book. Because of this, I have a lot if <input /> tags (81 to be precise) for unique id's for each one. But I have also had to write the maxlength attribute for each <input /> tag that I wrote.

I am wondering if you can do this in css instead. Can you have attributes other that style attributes (such as border or margin) in CSS? If so, how do you reference them? I've tried to type it directly in, but it appears that it does not exist.

My examplar input tag: <input id="00" type="text" onclick="checkIfBold('00')" maxlength="1"/>

The CSS for the tag:

input {
    border: 0px solid #000;
    width: 100%;
    height: 100%;
    font-size: 200%;
    text-align: center;
}

My aim is to set the maxlength attribute of the <input /> element by using CSS.

Note that I am not just asking about this specific attribute, I am asking how to reference any other html attribute in css (if possible)?

Upvotes: 0

Views: 325

Answers (4)

MaxPRafferty
MaxPRafferty

Reputation: 4977

Use square brackets to select attributes in CSS. Keep in mind that you don't have a lot of leeway here. Basically, you can say:

[border]{
  /*styles for elements with a border*/
}

or

[border=1px solid black]{
  /*styles for elements with a border of EXACTLY 1px solid black, in that order*/
}

there are no wildcards or partial matches. You will likely Javascript to select more specifically, or to alter anything other than styles.

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

Based on my comment above:

You can't do this with CSS, but it's very simple to do with jQuery...

$(document).ready(function() {
    $("input").attr('maxlength','1');
});

Switch out the '1' with whatever number you want the maxlength to be and you can also switch out 'maxlength' with any other attribute you want to target.

Upvotes: 1

Sebsemillia
Sebsemillia

Reputation: 9476

This is not possible with CSS. You could use javascript / jQuery.

Here is an example for jQuery:

$('input[type="text"]').attr('maxlength', '1');

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

You can't. CSS is for defining how things should look. maxlength defines how the input works. maxlength defines functionality. If you want to give an input a certain (visual) size, use the width CSS property.

Upvotes: 5

Related Questions