0

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

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Arbiter
  • 433
  • 2
  • 9
  • Are you asking, for example, how to set the max length for all inputs via CSS instead of inline? Since you're using Javascript, would a JS/jQuery solution work for you? – Dryden Long Feb 20 '14 at 21:41
  • Yes, but I'd rather it be using CSS. – Arbiter Feb 20 '14 at 21:43
  • Well, I don't think it's possible using CSS, and if it is, it's going to be some weird hack that probably won't work in all browsers and will be extremely difficult to employ... I'm posting a jQuery solution below that will work just fine for you though. – Dryden Long Feb 20 '14 at 21:46
  • It seems your answer to my comment and the wording in post are a little conflicting. Are you trying to set an element's attribute, or are you trying to style an element with a specific attribute value? – Dryden Long Feb 20 '14 at 21:57
  • possible duplicate of [Can I specify maxlength in css?](http://stackoverflow.com/questions/1363030/can-i-specify-maxlength-in-css) – MaxPRafferty Feb 20 '14 at 21:58
  • I'm trying to set an element's attribute, but not in HTML, in CSS. And preferably not in Javascript (never used jQuery before) – Arbiter Feb 20 '14 at 22:03
  • Ok, well you're out of luck with CSS so this might be a good opportunity to learn the basics of jQuery, it's pretty easy to learn so you should be fine. – Dryden Long Feb 20 '14 at 22:06

4 Answers4

5

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.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
1

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.

Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • OK, well thank you for your help. I guess I will just have to use Javascript, or just type in into each element individually. – Arbiter Feb 20 '14 at 22:10
0

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

Here is an example for jQuery:

$('input[type="text"]').attr('maxlength', '1');
Sebsemillia
  • 9,366
  • 2
  • 55
  • 70
  • I think the question is about getting the (false) idea that every attribute can or should be defined in CSS. Since that is not possible, you might as well add the attributes in HTML. No need to write Javascript for it, especially if those 81 inputs are generated by a server side script. But it's nice to know how. :) – GolezTrol Feb 20 '14 at 21:49
  • @GolezTrol I agree there is no *need* for JS, but since it seems OP's goal is to save time/effort in manually typing (copy/pasting) the maxlength attributes for each element, this answer will ultimately do that... – Dryden Long Feb 20 '14 at 21:52
  • I wouldn't recommend doing that via Javascript either, but as you pointed out via server side script. But I tried helping the OP with his question and showing him a quick client side solution, as he tried to approach it also client side with CSS. – Sebsemillia Feb 20 '14 at 22:03
0

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.

MaxPRafferty
  • 4,819
  • 4
  • 32
  • 39
  • I think you may have misunderstood the question. OP doesn't want to *select* elements with specific attributes, but *set* those attributes . – Dryden Long Feb 20 '14 at 21:55
  • Ah - i see. Fundamental understanding issue then. Style attributes are css and css is style attributes, nothing more. – MaxPRafferty Feb 20 '14 at 22:00
  • Yeah, and you may not have misunderstood... After I posted my comment, I went a re-read OP's question and it isn't too clear so you may be on the mark... Just one of those questions I guess! – Dryden Long Feb 20 '14 at 22:04