text-transform select field browser problems

-1

I'm trying to change option text to upper case with css text-transform.
Not working in Safari/iphone and not working in firefox/desktop. Does anybody have a solution without using toUpperCase() / javascript ?

select {

  text-transform: uppercase;

}

<select>

  <option value="">item1</option>

  <option value="">item2</option>

</select>

edited Nov 22 '18 at 12:37

ksav

5,35821331

asked Nov 22 '18 at 12:32

hb8

315

1

Selects are notoriously iffy for styling - if it doesn't work, then you probably need to use a js plugin to change the look and feel - I usually use select2

– Pete
Nov 22 '18 at 12:39

Thanks for the suggestion Pete

– hb8
Nov 22 '18 at 13:14

So are you saying that this works on all other browsers that you've tried, like IE/Edge and Chrome? If this doesn't work anywhere then the problem is somewhere else. If you click on the "Run code snippet" in the question, does it work there?

– JJJ
Nov 22 '18 at 16:50

add a comment |

-1

select {

  text-transform: uppercase;

}

<select>

  <option value="">item1</option>

  <option value="">item2</option>

</select>

edited Nov 22 '18 at 12:37

ksav

5,35821331

asked Nov 22 '18 at 12:32

hb8

315

1

Selects are notoriously iffy for styling - if it doesn't work, then you probably need to use a js plugin to change the look and feel - I usually use select2

– Pete
Nov 22 '18 at 12:39

Thanks for the suggestion Pete

– hb8
Nov 22 '18 at 13:14

So are you saying that this works on all other browsers that you've tried, like IE/Edge and Chrome? If this doesn't work anywhere then the problem is somewhere else. If you click on the "Run code snippet" in the question, does it work there?

– JJJ
Nov 22 '18 at 16:50

add a comment |

-1

select {

  text-transform: uppercase;

}

<select>

  <option value="">item1</option>

  <option value="">item2</option>

</select>

edited Nov 22 '18 at 12:37

ksav

5,35821331

asked Nov 22 '18 at 12:32

hb8

315

select {

  text-transform: uppercase;

}

<select>

  <option value="">item1</option>

  <option value="">item2</option>

</select>

select {

  text-transform: uppercase;

}

<select>

  <option value="">item1</option>

  <option value="">item2</option>

</select>

select {

  text-transform: uppercase;

}

<select>

  <option value="">item1</option>

  <option value="">item2</option>

</select>

html css

edited Nov 22 '18 at 12:37

ksav

5,35821331

asked Nov 22 '18 at 12:32

hb8

315

edited Nov 22 '18 at 12:37

ksav

5,35821331

asked Nov 22 '18 at 12:32

hb8

315

edited Nov 22 '18 at 12:37

ksav

5,35821331

edited Nov 22 '18 at 12:37

ksav

5,35821331

edited Nov 22 '18 at 12:37

ksav

5,35821331

asked Nov 22 '18 at 12:32

hb8

315

asked Nov 22 '18 at 12:32

hb8

315

asked Nov 22 '18 at 12:32

hb8

315

1

Selects are notoriously iffy for styling - if it doesn't work, then you probably need to use a js plugin to change the look and feel - I usually use select2

– Pete
Nov 22 '18 at 12:39

Thanks for the suggestion Pete

– hb8
Nov 22 '18 at 13:14

So are you saying that this works on all other browsers that you've tried, like IE/Edge and Chrome? If this doesn't work anywhere then the problem is somewhere else. If you click on the "Run code snippet" in the question, does it work there?

– JJJ
Nov 22 '18 at 16:50

add a comment |

1

Selects are notoriously iffy for styling - if it doesn't work, then you probably need to use a js plugin to change the look and feel - I usually use select2

– Pete
Nov 22 '18 at 12:39

Thanks for the suggestion Pete

– hb8
Nov 22 '18 at 13:14

So are you saying that this works on all other browsers that you've tried, like IE/Edge and Chrome? If this doesn't work anywhere then the problem is somewhere else. If you click on the "Run code snippet" in the question, does it work there?

– JJJ
Nov 22 '18 at 16:50

Selects are notoriously iffy for styling - if it doesn't work, then you probably need to use a js plugin to change the look and feel - I usually use select2

– Pete
Nov 22 '18 at 12:39

Thanks for the suggestion Pete

– hb8
Nov 22 '18 at 13:14

So are you saying that this works on all other browsers that you've tried, like IE/Edge and Chrome? If this doesn't work anywhere then the problem is somewhere else. If you click on the "Run code snippet" in the question, does it work there?

– JJJ
Nov 22 '18 at 16:50

add a comment |

2 Answers
2

active

oldest

votes

-3

text-transform DOES work in both safari 1.0 + and firefox 1.0+ since it belongs to CCS1.

Can you try to use
<select style="text-transform:uppercase">
instead?

Take into account that there are some languages which are not supported by this style.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Greets

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

thanks for the reply, but unfortunately not working in firefox quantum 63.

– hb8
Nov 22 '18 at 13:10

add a comment |

-3

Unfortunately, you might need to resort to JS:

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

answered Nov 22 '18 at 12:47

ksav

5,35821331

OP specifically says not to use toUpperCase!

– Pete
Nov 22 '18 at 12:49

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431114%2ftext-transform-select-field-browser-problems%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

-3

text-transform DOES work in both safari 1.0 + and firefox 1.0+ since it belongs to CCS1.

Can you try to use
<select style="text-transform:uppercase">
instead?

Take into account that there are some languages which are not supported by this style.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Greets

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

thanks for the reply, but unfortunately not working in firefox quantum 63.

– hb8
Nov 22 '18 at 13:10

add a comment |

-3

text-transform DOES work in both safari 1.0 + and firefox 1.0+ since it belongs to CCS1.

Can you try to use
<select style="text-transform:uppercase">
instead?

Take into account that there are some languages which are not supported by this style.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Greets

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

thanks for the reply, but unfortunately not working in firefox quantum 63.

– hb8
Nov 22 '18 at 13:10

add a comment |

-3

text-transform DOES work in both safari 1.0 + and firefox 1.0+ since it belongs to CCS1.

Can you try to use
<select style="text-transform:uppercase">
instead?

Take into account that there are some languages which are not supported by this style.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Greets

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

text-transform DOES work in both safari 1.0 + and firefox 1.0+ since it belongs to CCS1.

Can you try to use
<select style="text-transform:uppercase">
instead?

Take into account that there are some languages which are not supported by this style.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Greets

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

answered Nov 22 '18 at 12:44

Jaime Satorres Rey

thanks for the reply, but unfortunately not working in firefox quantum 63.

– hb8
Nov 22 '18 at 13:10

add a comment |

thanks for the reply, but unfortunately not working in firefox quantum 63.

– hb8
Nov 22 '18 at 13:10

thanks for the reply, but unfortunately not working in firefox quantum 63.

– hb8
Nov 22 '18 at 13:10

add a comment |

-3

Unfortunately, you might need to resort to JS:

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

answered Nov 22 '18 at 12:47

ksav

5,35821331

OP specifically says not to use toUpperCase!

– Pete
Nov 22 '18 at 12:49

add a comment |

-3

Unfortunately, you might need to resort to JS:

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

answered Nov 22 '18 at 12:47

ksav

5,35821331

OP specifically says not to use toUpperCase!

– Pete
Nov 22 '18 at 12:49

add a comment |

-3

Unfortunately, you might need to resort to JS:

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

answered Nov 22 '18 at 12:47

ksav

5,35821331

Unfortunately, you might need to resort to JS:

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

document.querySelectorAll('.upper-case-option').forEach(option => {

  option.text = option.text.toUpperCase()

})

<select>

  <option class="upper-case-option" value="">item1</option>

  <option class="upper-case-option" value="">item2</option>

</select>

answered Nov 22 '18 at 12:47

ksav

5,35821331

answered Nov 22 '18 at 12:47

ksav

5,35821331

answered Nov 22 '18 at 12:47

ksav

5,35821331

answered Nov 22 '18 at 12:47

ksav

5,35821331

OP specifically says not to use toUpperCase!

– Pete
Nov 22 '18 at 12:49

add a comment |

OP specifically says not to use toUpperCase!

– Pete
Nov 22 '18 at 12:49

OP specifically says not to use toUpperCase!

– Pete
Nov 22 '18 at 12:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu